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版本而报错
③选择器多一个空格和少一个空格的影响是很大的。