jquery选择器和DOM操作

最新推荐文章于 2023-04-23 17:34:04 发布

weixin_30897233

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/naqiang/p/5735921.html

版权

这个文章经历的时间比较长，不是因为jQuery比较难，而是东西比较多，真心是个体力活。所以本来想把jQuery做成一篇去写，但由于写的时候发现jQuery发现写成一篇的话过于长，对于阅读起来也不是一个好事，所以拆成两篇，这篇文章只说说选择器，筛选器和dom的操作，有基础的人可以把这个一篇略去不看，或者直接去看官方的API.因为这个实在没有什么可以发挥和有心得的地方，就是简单的api的使用，有点枯燥，所以说，如果真心觉得底子不够的人，还是要静下心去阅读，毕竟这是一个开始。下篇会说到一些“高级”的知识--事件，缓存，Ajax详解，动画实现和相关的动画插件，最后再说下jQuery的插件开发的方法和一些套路。下面不多说了，先看下今天的要说的东西。

前面说了js相关的东西，今天说说jQuery，对于jQuery来说是一个强大的js类库，兼容性和性能都不错，也是项目中经常使用的，但它毕竟是一个工具类型的东西，对于这样的东西我们只要把api先学好，能够使用了。后面如果有兴趣可以学习下它的源码和架构。由于jQuery的更新比较快，所以这里只说比较常用的api,不去过多的追求新的特性。

什么是jQuery？什么是是jQuery对象？和js对象有什么区别？

什么是jQuery

说下我个人的理解，jQuery是一个轻量的js库，提供了dom选择、操作、兼容完善的事件机制和Ajax的封装，使之有更为简便和简捷的去开发js程序。

优点：

轻量级，使用的时候只需要一个jQuery的类库就行了
强大的选择器和dom操作。
出色的浏览器兼容
方便的Ajax调用
完善的事件机制，简化了原生js的事件绑定
链式操作
丰富的插件和方便的插件的开发模式
完善的bug的提交和解决机制
持续的更新中（双刃剑）

缺点：

说完了优点，我想缺点也是很明显的，毕竟这两个是相对的

1、为了兼容性，有时在性能上有所妥协。同样强大方便的选择器，里面必然的有性能的损失（后面会说到）

2、可能的插件的冲突（这个不是jQuery本身的原因）

3、存在向下兼容的问题

看代码：
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <script src="jquery-2.1.4.js"></script> </head> <body> <div id="divSelect" style="width: 200px;height: 200px;border: 1px solid black;"></div> </div> </body> </html> <script type="text/javascript"> //说下原生js和jQuery的差别,把上面的div添加一个样式，并绑定一个click事件 //原生js var div = document.getElementById("divSelect"); div.setAttribute("class", "select"); // div.className="select";//也可以这样写 div.addEventListener("click", function() { console.log("ok"); }, false); //使用jQuery $("#divSelect").addClass("select").on("click", function() { console.log("ok"); }); </script> <style> .select { background-color: #FF6666;}

上面的两段代码是运行的结果是一样的，原生的js的写法过于冗余，而使用jQuery只需要一句，这依赖于jQuery的强大的dom操作和链式操作。

2、什么是jQuery对象，和js对象有什么关系：

要jQuery中的普通对象是和js里面的一样的，但是对于dom 来说，jQuery对其它又封装了一次，看代码：

var div = document.getElementById("divSelect");
//使用jQuery
var $div=$("#divSelect"); console.log(div); console.log($div);

输出结果如下：

从上面的结果可以看出，jQuery选择出来的dom又再次封装了一层，这样有什么好处？这个问题很简单，这样既兼顾了原生js的东西，又添加自定义的方法。同样，我们看下面的，我在控制台里面又加了几个语句，结果如图：

从上面的这个结果可以看出，从jQuery到原生的js的dom对象的时候，只需要获取下自身的属性（索引0和get(0)都可以），同样，js原生对象转成jQuery对象直接用$(),如$(div),这样这个对象就可以使用jQuery的方法，基于这个结果，大家自己也可以想想这个是怎么封装的？我随便写了下，不要在意代码质量，只说明下原理：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <script src="jquery-2.1.4.js"></script> </head> <body> <div id="divSelect" style="width: 200px;height: 200px;border: 1px solid black;"></div> </div> </body> </html> <script type="text/javascript"> //原生js var div = document.getElementById("divSelect"); //使用jQuery var $div = $("#divSelect"); // var _div = _("divSelect"); console.log(div); console.log($div); console.log(_div) //我用_来封装 function _(arg) { var jq = { show: "这里是我封闭的公有属性" }; if (typeof arg === "string") { var d = document.getElementById(arg); var res = { "0": d, jq: jq, get: function(d) { return this[d]; } } } else if (typeof arg === "object") { var res = { "0": d, jq: jq, get: function(d) { return this[d]; } } } return res; } </script> <style> .select { background-color: #FF6666; } </style>

从上面的运行结果，可以看出，我们的封装也生效了，当然没有jQuery封装的强大了。

好了，jQuery基本的东西说完了，下面开始学学它的API，当然最好的方法是去官方的 API学习了，这篇文章，只说说一些常用的函数，没有官方的那么多，同样也把自己日常用的问题也拿出来分享下。

PS：这里为了演示方便，会使用一个addClass方法，这个是一个添加样式的方法，后面会说到，也很简单，与其对应的是removeClass。

选择器

常用选择器

#id	根据ID选择元素
element	根据给定的元素名匹配所有元素
.class	根据给定的类匹配元素
*	匹配所有元素（不推荐使用）
selector1,selector2,..	将每一个选择器匹配到的元素合并后一起返回。

Demo:

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <script src="jquery-2.1.4.js"></script> </head> <body> <div id="divSelect"></div> <div class="test"></div> <div></div> <div></div> <p class="test"></p> <p></p> </body> </html> <style> .select { background-color: #FF6666; } div{ height: 100px; width:200px; margin: 10px; border: 1px solid black; } p{ height: 100px; width:200px; margin: 10px; border: 1px solid black; } </style> <script type="text/javascript"> // $("#divSelect").addClass('select'); // $("div").addClass('select'); // $(".test").addClass("select"); // $('*').addClass('select');  $('div,p').addClass('select'); </script>

2、属性选择器

[attribute]	匹配包含给定属性的元素(常用)
[attribute=value]	匹配给定的属性是某个特定值的元素
[attribute!=value]	匹配所有不含有指定的属性，或者属性不等于特定值的元素。（不推荐单独使用，结果筛选器使用，等价于:not([attr=value]或 [attr]:not([attr=value])）
[attribute^=value]	匹配给定的属性是以某些值开始的元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]	复合属性选择器，需要同时满足多个条件时使用。

Demo:

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <script src="jquery-2.1.4.js"></script> </head> <body> <div></div> <div type='table'></div> <div type='chart'></div> <div type='testchart'></div> <div type='charttest'></div> <div type='chatestrt'></div> </body> </html> <style> .select { background-color: #FF6666; } div { height: 100px; width: 200px; margin: 10px; border: 1px solid black; } p { height: 100px; width: 200px; margin: 10px; border: 1px solid black; } </style> <script> // $("[type]").addClass('select'); // $("[type=table]").addClass('select'); // $("[type=table]").addClass('select');  // $("[type!=table]").addClass('select');//这与下面的个区别 // $("[type]:not([type=table])").addClass('select');//这与上面的区别 // $("[type^=test]").addClass('select'); // $("[type$=test]").addClass('select'); // $("[type*=test]").addClass('select'); // $("[type][type!=table][type*=test]").addClass('select'); </script>

3、子元素选择器

:first-child	匹配第一个子元素
:last-child	匹配最后一个子元素

Demo:

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <script src="jquery-2.1.4.js"></script> </head> <body> <div id="div1"> <p class="test"></p> <p class="test"></p> <p class="test"></p> <p class="test"></p> </div> <div id="div2"> <p class="test"></p> <p class="test"></p> <p class="test"></p> <p class="test"></p> </div> <div id="div3"> <p class="test"></p> <p class="test"></p> <p class="test"></p> <p class="test"></p> </div> <div id="div4"> <p class="test"></p> <p class="test"></p> <p class="test"></p> <p class="test"></p> </div> </body> </html> <style> .select { background-color: #FF6666; } div { height: 80px; width: 320px; margin: 10px; border: 1px solid black; } p { height: 50px; width:50px; margin: 10px; border: 1px solid black; } .test{ float: left; } </style> <script type="text/javascript"> $(function

转载于:https://www.cnblogs.com/naqiang/p/5735921.html

weixin_30897233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器和DOM操作

这个文章经历的时间比较长，不是因为jQuery比较难，而是东西比较多，真心是个体力活。所以本来想把jQuery做成一篇去写，但由于写的时候发现jQuery发现写成一篇的话过于长，对于阅读起来也不是一个好事，所以拆成两篇，这篇文章只说说选择器，筛选器和dom的操作，有基础的人可以把这个一篇略去不看，或者直接去看官方的API.因为这个实在没有什么可以发挥和有心得的地方，就是简单的api的使用...
复制链接

扫一扫