JQuery

ぐ巨炮叔叔 提交于 2019-12-06 03:20:55

jQuery

jquery对象和dom对象

jquery找到的标签对象为jquery对象
原生js找到的标签对象为dom对象

dom对象,只能用dom对象的方法
jquery对象,只能用jquery对象的方法

转换
    jquery对象转dom对象--jquery对象[0]
    dom对象转jquery对象---$(dom对象)

jquery选择器

    基本选择器(同css)
      id选择器:

$("#id")  #不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器,通过jQuery找到的标签对象就是一个jQuery对象,用原生JS找到的标签对象叫做DOM对象,看我们上面的jQuery对象部分的内容
      标签选择器:

$("tagName")
      class选择器:

$(".className")
      配合使用:

$("div.c1")  // 找到有c1 class类的div标签
      所有元素选择器:

$("*")
      组合选择器:

$("#id, .className, tagName")

选择器找到的可能是多个标签,会放在数组里面,但还是jquery对象.能够直接使用jquery方法,意思找到所有标签进行统一设置,如果要单独设置选中的 所有标签的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签是个dom对象

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素 支持负数
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
找到的任然是li标签

$("li:first")  --->找到的是所以li标签中的第一个

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于


例子:
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

层级选择器

x和y可以为任意选择器

$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

表单筛选器

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

$(':checkbox')    #找到所以的checkbox

表单对象属性筛选器

:enabled        可用的标签
:disabled       不可用的标签
:checked        选中的标签
:selected       选中的下拉框

$("input:enabled")    #找到可用的input标签
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

$(":selected")  // 找到所有被选中的option

筛选器方法

下一个元素:
    $("#id").next()    找到下面的兄弟标签
    $("#id").nextAll()     找到下面所有的标签
    $("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找,不包含它

上一个元素:
    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")

父亲元素:
    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到)
    $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。
    
    
儿子和兄弟元素:
    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们,不包含自己,.siblings('#id'),可以在添加选择器进行进一步筛选
    
    
find标签

    $("div").find("p")        等价于$("div p")
    
筛选(过滤)
    $("div").filter(".c1")    找到div值并且div的calss值为c1的标签
    
    
筛选方法:
    .first() // 获取匹配的第一个元素
    .last() // 获取匹配的最后一个元素
    .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
    .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
    .eq() // 索引值等于指定值的元素
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!