JQuery学习笔记之选择器
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>
