一、id选择器
$( "#id" )
二、类选择器
$( ".class" )
三、元素选择器
$( "元素【p、div、a………】" )
四、全选择器(*选择器)
$( "*" )
五、层级选择器
例:
//子选择器
//$('div > p') 选择所有div元素里面的子元素P
//后代选择器
//$('div p') 选择所有div元素里面的p元素
//相邻兄弟选择器
// $(".prev + div")选取class=“prev”后面的第一个的div兄弟节点
//一般相邻选择器
// $(".prev ~ div")选取class=“prev”后面的所有的div兄弟节点
六、基本筛选选择器
例:
//找到第一个div
$(".div:first")
//找到最后一个div
$(".div:last")
//:even 选择所引值为偶数的元素,从 0 开始计数
$(".div:even")
//:odd 选择所引值为奇数的元素,从 0 开始计数
$(".div:odd")
//:eq
//选择单个
$(".aaron:eq(2)")
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)")
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)")
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素
$("input:not(:checked) + p")
七、内容筛选选择器
例:
//查找所有class='div'中DOM元素中包含字符"contains"的元素节点
$(".div:contains(':contains')")
//查找所有class='div'中DOM元素中包含"span"的元素节点
$(".div:has(span)")
//选择所有包含子元素或者文本的a元素
$("a:parent")
//找到a元素下面的所有空节点(没有子元素)
$("a:empty").text(":empty")
八、可见性筛选选择器
例:
//查找id = div1可见的DOM元素
$('#div1:visible')
//查找id = div1隐藏的DOM元素
$('#div1:hidden')
我们有几种方式可以隐藏一个元素:
- CSS display的值是none。
- type="hidden"的表单元素。
- 宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的,该元素是不会在页面上显示
- CSS visibility的值是hidden
- CSS opacity的指是0
九、 属性筛选选择器
例:
//查找所有div中,属性name=p1的div元素
$('div[name=p1]')
//查找所有div中,有属性p2的div元素
$('div[p2]')
//查找所有div中,有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]')
//查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name~="a"]')
//查找所有div中,属性name的值是用imooc开头的
$('div[name^=imooc]')
//查找所有div中,属性name的值是用imooc结尾的
=imooc]')
//查找所有div中,有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]')
//查找所有div中,有属性testattr中的值没有包含"true"的div
$('div[testattr!="true"]')
十、 子元素筛选选择器
例:
//查找class="first-div"下的第一个a元素
//针对所有父级下的第一个
$('.first-div a:first-child')
//查找class="first-div"下的最后一个a元素
//针对所有父级下的最后一个
//如果只有一个元素的话,last也是第一个元素
$('.first-div a:last-child')
//查找class="first-div"下的只有一个子元素的a元素
$('.first-div a:only-child')
//查找class="last-div"下的第二个a元素
$('.last-div a:nth-child(2)')
//查找class="last-div"下的倒数第二个a元素
$('.last-div a:nth-last-child(2)')
十一、表单元素选择器
例:
//:input 选择器基本上选择所有表单控件
$(':input')
//匹配所有input元素中类型为text的input元素
$('input:text')
//匹配所有input元素中类型为password的input元素
$('input:password')
//匹配所有input元素中的单选按钮,并选中
$('input:radio')
//匹配所有input元素中的复选按钮,并选中
$('input:checkbox')
//匹配所有input元素中的提交的按钮,修改背景颜色
$('input:submit')
//匹配所有input元素中的图像类型的元素,修改背景颜色
$('input:image')
//匹配所有input元素中类型为按钮的元素
$('input:button')
//匹配所有input元素中类型为file的元素
$('input:file')
十二、表单对象属性选择器
例:
//查找所有input所有可用的(未被禁用的元素)input元素。
$('input:enabled')
//查找所有input所有不可用的(被禁用的元素)input元素。
$('input:disabled')
//查找所有input所有勾选的元素(单选框,复选框)
$('input:checked')
//查找所有option元素中,有selected属性被选中的选项
$('option:selected')
十三、特殊选择器this
p.addEventListener('click',function(){
//this === p
//以下两者的修改都是等价的
this.style.color = "red";
p.style.color = "red";
},false);
对比
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})
例子:
1、
2、
十四、jQuery对象与DOM对象
普通处理,通过标准JavaScript处理:
var p = document.getElementById('imooc');
p.innerHTML = '您好!通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';
jQuery的处理:
var $p = $('#imooc');
$p.html('您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');
十五、jQuery对象转化成DOM对象
HTML代码
元素一
元素二
元素三
JavaScript代码
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
通过jQuery自带的get()方法
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
十六、DOM对象转化成jQuery对象
HTML代码
元素一
元素二
元素三
JavaScript代码
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色