首页 > 代码库 > jQuery入门级part.1
jQuery入门级part.1
jquery的选择器:
基本选择器:
#id 根据id的属性值来获取元素
TagName 根据标签名来获取元素
selector1,selector2 匹配列表中的选择器
.class 根据class的属性值来获取元素
层级选择器:
祖先元素 后代元素 匹配祖先元素下面的指定的后代元素
parent > child 匹配父元素下面的指定的子元素
prev + next 匹配当前元素的下一个兄弟元素 要求这两个元素必须邻居
prev~siblings 匹配当前元素的下面的指定所有的兄弟元素
简单选择器:
:first 匹配第一个元素
:last 匹配最后一个元素
:even 匹配下标值为偶数的所有元素
:odd 匹配下标值为奇数的所有元素
:eq(index) 匹配下标值为指定值的元素
:gt(index) 匹配下标值大于指定值的所有元素
:lt(index) 匹配下标值小于指定值的所有元素
:not(selector) 匹配不包含指定选择器的所有元素
内容选择器:
:contains(text) 匹配内容中包含指定值的元素
:empty 匹配内容为空的元素
:has(selector) 匹配内容中包含指定选择器的元素
:parent 匹配内容不为空的元素
可见性选择器:
:hidden 匹配隐藏的元素 CSS中:display:none
:visible 匹配显示的元素 CSS中:display:block
属性选择器:
[attribute] 匹配指定属性的所有元素
[attribute=value] 匹配属性等于指定值的元素 input[name=”username”]
[attribute!=value] 匹配属性不等于指定值的所有元素
[attribute^=value] 匹配属性以指定值开头的所有元素
[attribute$=value] 匹配属性以指定值结束的所有元素
[attribute*=value] 匹配属性中包含指定值的所有元素
[selector1][selector2][selectorN] 匹配列表中所有属性
子元素选择器:
:nth-child(index/even/odd) 匹配索引值为指定值或者索引值为奇偶的子元素 这里的是从1开始的
:first-child 第一个子元素
:last-child 最后一个子元素
:only-child 匹配有且仅有一个子元素
!css3也可以用
表单属性选择器:
:input 匹配表单里面所有元素 包含select textarea !$(“input”)它是匹配到所有的input标签 !$(“:input”)它是匹配到除了input标签以外 select textarea 所有的表单控件元素
:text 匹配单行文本框
:password 匹配单行密码框
:radio 匹配单选按钮
:checkbox 匹配多选按钮
:submit 匹配提交按钮
:reset 匹配重置按钮
:image 匹配图片按钮
:button 匹配普通按钮
:file 匹配文件上传
:hidden 匹配隐藏域 如果是要匹配表单中的隐藏域控件 一定要先加上input标签 $(“input:hidden”)
表单对象选择器:
:enabled 匹配表单中可用的表单控件
:disabled 匹配表单中不可用的表单控件
:checked 匹配表单中默认选中的元素 单选按钮和多选按钮
:selected 匹配表单中默认选中的元素 下拉列表
jQuery对象与JavaScript对象之间相互转换:
jQuery对象转换为JavaScript对象:
方法:jQuery对象[下标]
将JavaScript对象转换为jQuery对象:
方法:$(JavaScript对象)
jQuery中的方法来操作HTML标签中的属性:
attr(name) 获取当前对象的指定的属性的值
attr(key,value) 给当前对象设置属性值
attr(properties) 一次给当前对象设置多个属性值 要求参数必须是一个JSON对象
removeAttr(name) 移动当前对象的属性名和属性值
jQuery对象操作标签中的class属性:
addClass(class) 给当前对象添加class属性值
removeClass(class) 将当前对象的class属性值移除
toggleClass(class) 当前对象中如果有指定的class属性值则移除 反之则添加
hasClass(class) 如果有指定的class属性值就返回true 反之没有就返回false
jQuery对象对标签中的style属性的操作:
css(name) 获取到当前对象的style属性指定的CSS样式的属性值
css(key,value) 给当前对象的的style属性中设置css样式
css(properties) 一次设置多个 要求参数必须是一个JSON对象
尺寸方法:
width() width(value) height() height(value)
文本、值:
html():获取双边标记中的内容
html(val):往双边标记设置内容
val():获取单边标记中的value属性值
val(val):往单边标记中的value属性设置值
text():获取双边标记的中的内容
text(val):往双边标记设置内容
html()和text()方法之间的区别: 一个可以解析HTML标签 一个解析不了
html()获取的时候将标签中的所有的内容都会获取到
text()获取的时候只会获取到标签中的文本内容
jQuery入门级part.1