jQuery入门级part.1

Posted 2020-08-17

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()获取的时候只会获取到标签中的文本内容