JQuery与DOM对象
<div id="test1" class="test2"></div>
DOM对象获取方式:
var dom_div1 = document.getElementById('test1'); var dom_div2 = document.getElementByClassName('test2'); JQuery对象获取方式:
var $jq_div1 = $('#test1'); // id选择器 var $jq_div2 = $('.test2'); // 类选择器 var $jq_div3 = $('div'); // 元素选择器 DOM对象与JQuery对象互相转换:
// dom -> jq var dom2jq_div1 = $(dom_div1); var dom2jq_div2 = $(dom_div2); // jq -> dom var jq2dom_div1 = jq_div1[0]; var jq2dom_div2 = jq_div2.get(0);
二者区别如下：
- 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
- 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短
选择器
上面一小节已经介绍了：
- id选择器
- 类(class)选择器
- 元素选择器
层选择器
下面介绍层选择器，有如下四种：
- 子选择器
- 后代选择器
- 相邻兄弟选择器
- 一般兄弟选择器
区别示例如下：
基本筛选选择器
<body> <h2>基本筛选器</h2> <h3>:first/:last/:even/:odd</h3> <div class="left"> <div class="div"> <p>div:first</p> <p>:even</p> </div> <div class="div"> <p>:odd</p> </div> <div class="div"> <p>:even</p> </div> <div class="div"> <p>:odd</p> </div> <div class="div"> <p>:even</p> </div> <div class="div"> <p>div:last</p> <p>:odd</p> </div> </div> <h3>:eq/:gt/:lt</h3> <div class="left"> <div class="aaron"> <p>:lt(3)</p> </div> <div class="aaron"> <p>:lt(3)</p> </div> <div class="aaron"> <p>:eq(2)</p> </div> <div class="aaron"> </div> <div class="aaron"> <p>:gt(3)</p> </div> <div class="aaron"> <p>:gt(3)</p> </div> </div> <script type="text/javascript"> //找到第一个div $('.div:first').css("color", "#CD00CD"); $('.div:last').css("color", "#CD00CD"); $('.div:odd').css("border", "3px groove red"); $('.div:even').css("border", "3px groove blue"); $('.aaron:eq(2)').css("border", "3px groove blue"); $('.aaron:lt(3)').css("color", "#CD00CD"); $('.aaron:gt(3)').css("border", "3px groove blue"); </script> </body> </html> 
内容筛选选择器
可见性筛选选择器
属性筛选选择器
子元素筛选选择器
表单元素选择器
其实也可以用属性筛选选择器，例如：
$('input[type=text]') == $('input:text') 表单对象属性筛选选择器
<input type="checkbox" checked="checked"> <input type="checkbox"> <input type="radio" checked> <input type="radio"> <select name="garden" multiple="multiple"> <option>imooc</option> <option selected="selected">慕课网</option> <option>aaron</option> <option selected="selected">博客园</option> </select> <script type="text/javascript"> //查找所有input所有勾选的元素(单选框,复选框) //移除input的checked属性 $('input:checked').removeAttr('checked') //查找所有option元素中,有selected属性被选中的选项 //移除option的selected属性 $('option:selected').removeAttr('selected') </script> 特殊选择器this
<p id="test1">点击测试：通过原生DOM处理</p> <p id="test2">点击测试：通过原生jQuery处理</p> <script type="text/javascript"> var p1 = document.getElementById('test1') p1.addEventListener('click',function(){ //直接通过dom的方法改变颜色 this.style.color = "red"; },false); </script> <script type="text/javascript"> $('#test2').click(function(){ //通过包装成jQuery对象改变颜色 $(this).css('color','blue'); }) </script>