嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascript库都有着各自的优缺点,同时也有各自的支持者和反对者,但是从JQuery诞生那天起,JQuery已经从其他javascript库中脱颖而出,称为web开发人员的最佳选择,所以这也是我学习JQuery的原因。好啦,总结一下今天学习的JQuery的选择器和对DOM的初步操作。

一.JavaScript与JQuery的区别

从上面我们区别了javascript的onlaod和jquery的ready方法我们就可以看到使用起来jquery是便利之处,可以让我们写的代码看起来没有那样的繁琐,所以这就是jquery受欢迎的原因之一。

二.使用javascript实现的一些功能

<script>
window.onload = function () {
//var pnodes = document.getElementsByTagName("p"); //单击事件实现弹出innerHTML的值
//for (var i = 0; i < pnodes.length; i++) {
// pnodes[i].onclick = function () {
// alert(this.innerHTML);
// };
//}; //var tablenodes = document.getElementById("tb"); //隔行变色
//var trnodes = tablenodes.getElementsByTagName("tr");
//for (var i = 0; i < trnodes.length; i++) {
// if (i % 2 == 0) { //根据索引判断是奇数还是偶数
// trnodes[i].style.backgroundColor="green";
// };
//}; document.getElementById("btn").onclick = function () {
var array = new Array();
var checknodes = document.getElementsByName("check");
for (var i = ; i < checknodes.length; i++) {
if (checknodes[i].checked) { //判断该项是否被选中
array.push(checknodes[i]); //如果是checked则放进数组中
}
}
alert("你选中了"+array.length+"个元素"); //使用length可以判断数组的长度
};
};
</script>
<body>
<p>测试1</p>
<p>测试2</p>
<table id="tb">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr> <td></td><td></td></tr>
</table>
<form>
<input type="checkbox" name="check" value="1 " checked="checked" /><br />
<input type="checkbox" name="check" value="2 " /><br />
<input type="checkbox" name="check" value="3 " checked="checked" /><br />
<input type="button" id="btn" name="name" value="你选中的个数 " />
</form>
</body>

写这些代码只是想和下面写的使用jquery写的代码对比一下,然后能够跟好的了解jquery,我想如果javascript学好啦,然后学习起来jquery应该是简单多啦吧,其实在javascript中感觉存在很多的浏览器兼容问题,要考虑浏览器是否兼容IE、Firefox等的问题,而在jquery中针对这个问题一般情况下不需要考虑很多,兼容性很好的。下面就介绍Jquery的选择器:基本选择器,层次选择器,过滤选择器,属性选择器和表单选择器。

三.基本选择器

<script src="script/jquery-1.7.1.min.js"></script>
<script>
//--------------------id选择器------------------
//$(function () {
// alert($("#divid").text());
//}) //--------------------遍历集合------------------
//$(function () { //在jquery中没有for的遍历,要使用each来遍历输出
// $(".div").each(function () {
// alert($(this).text());
// });
//}) //--------------------标签选择器------------------
//$(function () {
// $("div,span").each(function () { //多个标签div和span
// alert($(this).text());
// });
//}) //-------------------*选择器-------------------------
$(function () {
$("*").each(function () { //输出所有的文本信息
alert($(this).text());
});
})
</script>
<body>
<div id="divid"></div>
<div class="div"></div>
<div class="div"></div>
<span class="div"></span>
</body>

基本选择器是jquery中最常用的选择器,也是最简单的选择器,它通过id、class和标签名来查找DOM元素,在这里需要注意的是:id名称只能使用一次,而class可以多次使用,另外,基本选择器也可为称为CSS选择器,说的就是我们在对html元素在CSS中设置其样式时间使用的方法是一样的,嘿嘿,当然,最后一个选取所有的文本信息的是在这个存在的。

四.层次选择器

<script src="script/jquery-1.7.1.min.js"></script>
<script> //层次选择器
//--------------------后代选择器---------------
//$(function () {
// $("div span").each(function () { //仅仅输出div的下一节点以及子节点
// alert($(this).text());
// });
//}); //--------------------直接后代选择器----------------
//$(function () {
// $("div>span").each(function () { //仅仅输出div的下一节点
// alert($(this).text());
// });
//}); //----------------------兄弟选择器-------------------
//$(function () {
// $("#d2+div").each(function () { //输出div的下一节点
// alert($(this).text());
// });
//}); $(function () {
$("#d2~div").each(function () { //输出div的下部分的所有
alert($(this).text());
});
});
</script>
<body>
<div>
<span>span1<span>span11</span></span><span>span2</span>
<div id="d1">div1</div><div id="d2">div2 </div>
<div id="d3">div3</div><div id="d4">div4</div>
</div>
</body>

如果想通过DOM元素之间的的关系来获取特定元素,例如:后代元素,子元素,相邻元素或者兄弟元素等,那么层次选择就是很好的选择。

五.过滤选择器

<script>
//$(function () {
// alert($("li:first").text()); //输出第一个li元素的文本信息
//}); //$(function () {
// alert($("li:last").text()); //输出最后一个li元素的文本信息
//}); //使用索引时间可以这样:
//$(function () {
// alert($($("li")[0]).text()); //$("li")[0]为html中的一个元素,需要js转换为jquery
//}) //$(function () {
// alert($("li:not(.li)").text()); //输出除了classname为li的元素全部输出
//}); //$(function () {
// alert($("li:even").text()); //根据索引判断,输出索引值为偶数的文本信息
//}); //$(function () {
// alert($("li:odd").text()); //根据索引判断,输出索引值为奇数的文本信息
//}); //$(function () {
// alert($("li:eq(2)").text()); //根据索引判断,输出索引值为1文本信息
//});
//$(function () {
// alert($("li:gt(2)").text()); //根据索引判断,输出索引值大于2的文本信息
//});
//$(function () {
// alert($("li:lt(2)").text()); //根据索引判断,输出索引值小于2的文本信息
//});
</script>
<body>
<ul>
<li></li><li class="li"></li><li></li><li></li><li></li><li></li>
</ul>
</body>
<script src="script/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$(":hidden").each(function () { //寻找所有的不可看到的元素,在这里主要是把html中的所有不可见的元素输出了,例如:head等
alert($(this).val()); //在输出值的时间input标签的使用val即可
}) $(":vistable").each(function () { //寻找可见的元素的值
alert($(this).val)
})
});
</script>
<body>
<form>
<input type="text" value="" /><br />
<input type="hidden" name="hidden" value="456 " /><br />
<div style="display:none">div</div>
</form>
</body>

过滤选择器主要是通过特定的过滤原则来筛选出特定的DOM元素,锅炉规则和CSS中的伪类选择器语法相同,即选择器都是以:开头;按照不同的分类规则就分为上面的几种:基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象元素过滤筛选器。

六.属性过滤器

<script>   //属性选择器
//$(function () {
// $("div[id]").each(function () {
// alert($(this).text()); //寻找包含id这个属性的div元素的文本信息
// });
//});
//$(function () {
// alert($("div[id=div1]").text()); //寻找div元素中id为div1的文本信息
//});
//$(function () {
// $("div[div!=div1]").each(function () { //找出除了div元素中id为div1的其他的所有元素的文本信息
// alert($(this).text())
// });
//}); //$(function () {
// $("div[id~=d]").each(function () { //找出除了div元素中id以d开头的所有元素的文本信息
// alert($(this).text());
// });
//}); $(function () {
$("div[id$=v]").each(function () { //找出div元素中id以v结尾的所有元素的文本信息
alert($(this).text());
});
});
</script>
<body>
<div>div0</div><div id="div1">div1</div><div id="div2">div2</div>
<div id="div3">div3</div><div id="diav">div4</div><div id="dibv">div5</div>
</body>

属性选择器主要是通过元素的属性获取相应的元素。

七.表单对象过滤器

<script src="script/jquery-1.7.1.min.js"></script>
<script> //表单对象选择器
$(function () {
//$(":disabled").each(function () { //disabled是说明此元素不可用,enabled时可用的,在这里查找form表单元素中不可用的元素的文本信息
// alert($(this).val());
//}); //$(":enabled").each(function () { //查找form表单元素中可用的元素的文本信息,未写出来的则默认为enabled
// alert($(this).val());
//}); //$("input:checked").each(function () { //查找input元素中的属性checked="checked"的所有元素
// alert($(this).val());
//}); $(function () {
$(":selected").each(function () { //下拉列表中的选中的项的文本信息,即select元素的属性selected="selected"
alert($(this).text());
});
});
});
</script>
<body>
<form>
<input type="text" name="name" value="123 " disabled="disabled"/><br />
<input type="checkbox" name="name" value="表单1 " checked="checked" /><br />
<input type="checkbox" name="name" value="表单2 " checked="checked" />
<input type="radio" name="name" value="radio" checked="checked" />
<select>
<option value="">北京</option>
<option value="" selected="selected">上海</option>
<option value="">广州</option>
</select>
</form>
</body>

表单选择过滤筛选器主要是针对所选择表单元素进行过滤,录入上面的选择所选的下拉框、多选框等。

八.对DOM的操作

<script>
$(function () {
//var linode = $("ul li:eq(0)").text();
//alert(linode); //获取ul的第一个子节点的文本信息 //var pnode = $("p").attr("title"); //获取p元素的属性title的属性值使用的是attr方法
//alert(pnode);//$(function () {
// var lifirstnode = $("<li title='mango'> <span>mango</span></li>");
// var lisecondnode = $("<li>watermelon</li>");
// $("p").append(lifirstnode).append(lisecondnode); //创建新元素,可以添加属性,在添加时间也可以一次添加多个
//});
//$("ul li:last").remove(); //删除最后一个li元素
//$("ul li").remove(".apple"); //删除最后一个li元素
//var appleclone = $("ul li:last").clone(); //复制li元素的最后一个元素
//var appleclone1 = $(".banana").clone(); //复制classname为banana的元素
//$("ul").append(appleclone);
//$("ul").append(appleclone1);
//$("p").wrap("<b></b>"); //在p元素外面添加b元素使得文本信息加粗即可 //----------------------添加与删除属性值------------
//$("#titleid").attr("class", "pclass"); //给p元素添加一个class的属性,其属性的值为pclass //$("#titleid").removeAttr("class"); //删除p元素的class的属性
});
</script>
<body>
<p title="what is your favorite fruit?" id="titleid">what is your favorite fruit?</p>
<ul>
<li>orange</li>
<li class="banana">banana</li>
<li class="apple">apple</li>
</ul>
</body>

在上面刚学习完jquery选择器,在这里我们就是用上啦,可以拿来练习练习,查元素的节点首先我们通过jquery选择器找到需要的元素以后,就可以使用attr()来获取各种属性值,接下来的实例分别为创建节点、插入节点、删除节点、复制节点和包裹节点,另外还有最后一个就是对属性值的操作,在sttr方法中存在两个参数,一个为属性,另一个则为设置的属性值。

九.子节点的操作

    <script>
$(function () {
//$("#div").children().each(function () {
// alert($(this).text()); //获取div的子节点的文本信息,寻找子节点使用的是.children()
//}); //$("div div:eq(2)").next().each(function () {
//alert($(this).text()); //获取索引为2的上一个兄弟节点(4)
//}); //$("div div:eq(2)").nextAll().each(function () {
// alert($(this).text()) //获取索引为2的上面的所有兄弟节点(4,5,6,7,8)
//}); //$("div div:eq(2)").prev().each(function () {
//alert($(this).text()) //获取索引为2的下一个兄弟节点(2)
//}); $("div div:eq(2)").prevAll().each(function () {
alert($(this).text()) //获取索引为2的下面的所有兄弟节点(2,1)
});
});
</script>
<body>
<div id="div">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</body>

上面的方法都是多节点的操作,即遍历输出,好啦,今天就写到这里,学习了Jquery明显感觉前面写的javascript代码好笨重,但是javascript也有它存在特色,嘿嘿,不能仅仅只从代码上判断一种语言,只是我学习的太浅显,明显没有看到它的奥妙罢啦,继续练习,加油加油!

JQuery选择器和DOM的操作-入门学习的更多相关文章

  1. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  2. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  3. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  4. Jquery选择器大全、属性操作、css操作、文档、事件等

    一.简介   定义  jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象  jQuery产 ...

  5. 【Jquery】之DOM操作

    Questions 本篇文章主要讲解Jquery中对DOM的操作,主要内容如下: 1    内容区 1.1  .addClass() (1).addClass(className) <!DOCT ...

  6. jQuery选择器的的优点

    jQuery选择器的的优点 选择器想必大家都不陌生,今天呢,我就给大家介绍一下jQuery选择器的优点: jQuery选择器更简洁的写法: jQuery完善的处理机制: jQuery选择器判断dom节 ...

  7. 读<jquery 权威指南>[1]-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  8. 第25篇 jQuer快速学习(上)---选择器和DOM操作

    这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...

  9. JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

随机推荐

  1. 关于VS2008和VS2013中字体的选择

    我这学期上ASP.NET的课,用C#语言,配合VS2008.自己课余在研究手机游戏的开发,用的是C++语言,配合VS2013.这两种开发环境我自己试过好多字体,后来感觉适合我自己的应该是以下这两种: ...

  2. mysql数据库性能测试报告

    网上有写的好的模板, 直接复链接了: 1. http://blog.csdn.net/mituan1234567/article/details/45247989 2. https://msdn.mi ...

  3. smarty模板开发基础总结

    前提:1. 部署smarty模板目录:2. 编写Smarty类的子类,定制好template_dir.compile_dir.config_dir.cache_dir.left_delimiter.r ...

  4. Lucene系列五:Lucene索引详解(IndexWriter详解、Document详解、索引更新)

    一.IndexWriter详解 问题1:索引创建过程完成什么事? 分词.存储到反向索引中 1. 回顾Lucene架构图: 介绍我们编写的应用程序要完成数据的收集,再将数据以document的形式用lu ...

  5. AWT控件称为重量级控件

    AWT 是Abstract Window ToolKit (抽象窗口工具包)的缩写,这个工具包提供了一套与本地图形界面进行交互的接口. AWT 中的图形函数与操作系统所提供的图形函数之间有着一一对应的 ...

  6. Linux Shell nohup命令用法

    linux的nohup命令的用法.   在应用Unix/Linux时,我们一般想让某个程序在后台运行,于是我们将常会用 & 在程序结尾来让程序自动运行.比如我们要运行mysql在后台: /us ...

  7. 有空研究一下 superwebsocket (底层是 supersocket) 用来实现 web聊天什么的

    参考:http://superwebsocket.codeplex.com/ 一个老外写的 asp.net 下socket的多钟方案推荐 :http://www.codeproject.com/Art ...

  8. Win10尝鲜体验——初识传说中不一样的Windows 分类: 资源分享 2015-07-24 18:27 13人阅读 评论(0) 收藏

    这几天,网上传来一个消息,虽然不知是好是坏,Win10可以下载安装了! 出于好奇,下载尝鲜,几个截图,留作纪念~ 中文,还是要好好支持的,毕竟中国有如此多的用户 可选的安装版本 许可条款也刚刚出炉,估 ...

  9. Java多线程(九)之ReentrantLock与Condition

    一.ReentrantLock 类   1.1 什么是reentrantlock   java.util.concurrent.lock 中的 Lock 框架是锁定的一个抽象,它允许把锁定的实现作为 ...

  10. win10上跑 sqlserver 2000应用程序

    将SQL Server 安装程序\X86\SYSTEM\SQLUNIRL.DLL 替换到Win10 的 C:\windows\system32\目录下,64位win10 还要复制到SYSWOW64目录 ...