jquery总结01-基本概念和选择器

dom元素和jquery元素的区别

dom元素支持dom元素自带的属性和方法，jquery元素支持jquery元素自带的属性和方法

dom                  var div = document.getElementById('a');

jquery                 var $div = $('#a');

dom转jquery        var $a = $(div);

jquery转dom         var a = $div[0] 或者var a = $div.get(0);

js会因为获取不到元素而报错，jquery不会。

jquery获取的永远是对象，所以判断是否获取到该元素用$().length或者$().[0]来判断。

jquery选择器

$(this)于this的区别

$(this) jquery的上下文对象 支持jquery的方法和属性

this dom的上下文对象 支持jquery的方法和属性

常用选择器

id 选择器 #hh　　

类选择器 .demo　　

元素选择器 div　　

全选择器 * 　　

后代选择器 parent child　　所有后代

子选择器 parent>child　　儿子代的 孙子代以后的就不行了

相邻兄弟选择器 pre+next　　此元素之后的一个兄弟元素  和jquery的.next()一样

一般兄弟选择器 prev~siblings  次元素之后的所有兄弟元素 jquery的.siblings() 更全可以选择同一父元素下的所有兄弟元素

基本筛选选择器

$(':first') 第一个元素

$(':last')

$(':not()')

$(':eq(index)')  等于从零开始

$(':gt(index)')   大于

$(':lt(index)')   小于

$(':even')  偶

$(':odd') 奇

$(':header') 标题

$(':gt(index)')  正在执行动画效果的

内容筛选选择器

$(':contains(text)')

$(':parent')有内容的

$(':empty')没有内容的

$(':has(text)')至少包含

可见筛选选择器

$(':visible') 可见     注意 只要站空间都算可见  visibility:hidden ;opacity:0;即使不显示也占空间算可见

$(':hidden')  隐藏   ①display:none  ②type="hidden"  ③高宽为0  ④祖先隐藏

属性筛选选择器

$('[attribute=value]')

$('[attribute|=value]') 等于value或以value-开头

$('[attribute*=value]') 字符串包含value

$('[attribute~=value]') 空格值中包含

$('[attribute^=value]') 以value开始

$('[attribute$=value]') 以value结束

$('[attribute!=value]') 不等于

$('[attribute]')有这个属性

$('[attribute][attribute][attribute]')

子元素筛选器

$(':first-child') 第一个子元素

$(':last-child')

$(':only-child') 唯一子元素

$(':nth-child') 第n个，从1开始  $(':nth-child(3n)') ,$(':nth-child(even)')

$(':nth-last-child') 倒数第n个

注意：nth-child(index) 是从1开始，:eq(index)是从0开始

表单元素筛选器

$(':input') input textarea select button

$(':text')

$(':password')

$(':radio')

$(':checkbox')

$(':submit')

$(':reset')

$(':button')

$(':image')

$(':file')

表单对象筛选器

$(':enable') 可用

$(':disenable')

$(':checked')

$(':selected') 注意选中的是option

注意：

①选择器里面有特殊符号例如 # 需要用\\进行转义 $('#a\\#b');

②老版本属性选择器是带@的，[@title='text']，这可能会因为更新jquery版本而报错

③选择器多一个空格和少一个空格的影响是很大的。