移动互联网开发的学习心得,网络营销推广优化,网络技术服务公司,xampp如何安装wordpress选择器 jQuery的核心之一就是能非常方便的取到DOM元素。我们只需输入CSS选择字符串#xff0c;便可以得到匹配的元素。但在大多数情况下#xff0c;我们可以用简单的原生代码达到同样的效果。 .代码如下://----得到页面的所有div--------- /* jQuery */ $(div) …选择器 jQuery的核心之一就是能非常方便的取到DOM元素。我们只需输入CSS选择字符串便可以得到匹配的元素。但在大多数情况下我们可以用简单的原生代码达到同样的效果。
.代码如下://----得到页面的所有div--------- /* jQuery */ $(div) /* 原生 */ document.getElementsByTagName(div) //----得到所有指定class的元素--------- /* jQuery */ $(.my-class) /* 原生 */ document.querySelectorAll(.my-class) /* 更快的原生方法 */ document.getElementsByClassName(my-class) //----通过CSS选择得到元素---------- /* jQuery */ $(.my-class li:first-child) /* 原生 */ document.querySelectorAll(.my-class li:first-child) //----得到指定clsss的第一个元素---- /* jQuery */ $(.my-class).get(0) /* 原生 */ document.querySelector(.my-class) 译者注其实这里面是有些问题的document.querySelectorAll和jQuery选择器还是有区别的前者返回的是一个NodeList而后者返回的是一个类数组对象。 DOM操作 jQuery还在DOM操作上频繁使用例如插入或者删除元素。我们也可以使用原生方法来进行这些操作你会发现这需要写额外的代码当然也可以写自己的辅助函数来让使用起来更容易。下面是一些将元素插入到页面中的例子。
.代码如下://----插入元素---- /* jQuery */ $(document.body).append(div idmyDivimg srcim.gif//div); /* 蹩脚的原生方法 */ document.body.innerHTML div idmyDivimg srcim.gif//div; /* 更好的原生方法 */ var frag document.createDocumentFragment(); var myDiv document.createElement(div); myDiv.id myDiv; var im document.createElement(img); im.src im.gif; myDiv.appendChild(im); frag.appendChild(myDiv); document.body.appendChild(frag); //----前置元素---- // 除了最后一行 document.body.insertBefore(frag, document.body.firstChild); CSS classes 在jQuery中我们可以很容易对DOM元素添加、删除、检查它的CSS class。幸运的是利用原生方法也可以简单的办到。
.代码如下:// 得到DOM元素的引用 var el document.querySelector(.main-content); //----添加class------ /* jQuery */ $(el).addClass(someClass); /* 原生方法 */ el.classList.add(someClass); //----删除class----- /* jQuery */ $(el).removeClass(someClass); /* 原生方法 */ el.classList.remove(someClass); //----是否是该class--- /* jQuery */ if($(el).hasClass(someClass)) /* 原生方法 */ if(el.classList.contains(someClass)) 修改CSS属性 总是通过Javascript修改和检索CSS属性这样会比使用jQuery CSS函数更加简单快速并且没有任何不必要的代码。
.代码如下:// 得到DOM元素引用 var el document.querySelector(.main-content); //----设置CSS属性---- /* jQuery */ $(el).css({ background: #FF0000, box-shadow: 1px 1px 5px 5px red, width: 100px, height: 100px, display: block }); /* 原生 */ el.style.background #FF0000; el.style.width 100px; el.style.height 100px; el.style.display block; el.style.boxShadow 1px 1px 5px 5px red; 更多专业前端知识请上
【猿2048】www.mk2048.com
