JQuery基础总结-jQuery选择器

一、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对象