JQuery学习之jQuery九类选择器，属性，CSS和文档处理

Java_jfei

墨衍会员 · AI 创作全网分发码龄10年

关注

原创最新推荐文章于 2026-09-29 11:08:41 发布 521 阅读 AI 写同款· GEO 优化 ›

JQuery选择器帮助文档本文档列出了JQuery所有选择器，并附有详细说明和举例代码，我用的版本是1.3.2 立即下载

一、JQuery基本内容
1.JQuery是一个js框架(node.js angular.js bootstrap.js)

这个框架可以快速方便的操作html的css样式，修改html内容，查找html元素

2.为什么要使用JQuery：

1.JQuery兼容大部分的浏览器
2.JQuery代码比较简洁
3.JQuery应用非常广泛

3.如何使用JQuery：
1.需要导入Jquery-3.1.1.js文件到项目
2.需要在要使用Jquery-3.1.1.js的页面中引入该js文件

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

4.如何获取JQuery对象（掌握）

var $u=$("#username");//获取id为username的所有元素
alert($u.val());//获取u的value值
var $d=$("#div");
alert($d.html());//获取d的innerHtml

5.js和JQuery的互相转换：（掌握）

//js对象和JQuery对象的转换
var u=document.getElementById("username");//这是一个js对象
var $u=$(u);
alert($u.val());

//Jquery对象转换成js对象
var $u=$("#username");
var u=$u.get(0);//注意：每个Jquery对象都是一个类数组

6.在Jquery中如何表示页面已经加载完毕？（掌握）

$(document).ready(function(){
    alert("xxx");
});
//简写
$(function(){
    alert("xxx");
})

7.该方法和window.onload方法之间的区别(了解)

在写了多个时，window.onload会把前面的内容覆盖掉，而 $(document).ready不会覆盖原因在于:$ (document).ready内部有一个栈队，会依次执行队列里面的每个$(document).ready

二.选择器
1.基本选择器：（掌握）

#id id选择器:通过id值获得元素
    //选择id为one的元素
    $("#btn").click(function(){
            $("#one").css("background-color","red");
    })

element 标签选择器：通过标签名获得元素

//选择标签元素名是div的
    $("#btn3").click(function(){
            $("div").css("background-color","red");
    })

.class 类选择器：通过class值获得元素

//选择class为mini的元素
    $("#btn2").click(function(){
            $(".mini").css("background-color","red");
    })

* ：所有元素

//选择所有元素
    $("#btn4").click(function(){
            $("*").css("background-color","red");
    })

多选择器：将多个选择器的结果添加一个数组中

//选择所有的span和id为two的元素
    $("#btn5").click(function(){
            $("span,#two").css("background-color","red");
    })

2、层次选择器

A B–>获得A元素内部所有的B元素(爷孙)

 //选择 body内的所有div元素
$("#btn1").click(function(){
        $("body div").css("background-color","red");
})

A > B ，获得A元素内部所有的子元素B(父子)

 //在body内,选择子元素div的
$("#btn2").click(function(){
        $("body>div").css("background-color","red");
});

A + B ，获得A元素后面的第一个兄弟元素B（兄弟）

//选择 id为one 的下一个div元素.
$("#btn3").click(function(){
        $("#one+div").css("background-color","red");
});

A ~ B ，获得A元素后面的所有兄弟元素(兄弟)

//选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
$("#btn4").click(function(){
        $("#two~div").css("background-color","red");
});

A.siblings(“div”) A的所有div兄弟

//选择 id为two的元素的所有div兄弟元素." id="btn5"/>
$("#btn5").click(function(){
        $("#two").siblings("div").css("background-color","red");
});

3、基本过滤选择器:过滤选择器都是带冒号（掌握）

:first 第一个

    //选择第一个div元素
    $("#btn1").click(function(){
            $("div:first").css("background-color","red");
    });

:last 最后一个

    //选择最后一个div元素
    $("#btn2").click(function(){
            $("div:last").css("background-color","red");
    });

：eq(index) 获得指定索引

    //选择索引eq值等于3的元素
    $("#btn6").click(function(){
            $("div:eq(3)").css("background-color","red");
    });

:gt(index) 大于

    //选择索引值大于3的元素
    $("#btn7").click(function(){
            $("div:gt(3)").css("background-color","red");
    });

:lt(index) 小于

    //选择索引值小于3的元素
    $("#btn8").click(function(){
            $("div:lt(3)").css("background-color","red");
    });

:even 偶数，从 0 开始计数。例如：查找表格的1、3、5…行（即索引值0、2、4…）
:odd 奇数

    //选择索引值为偶数 的div元素
    $("#btn4").click(function(){
            $("div:even").css("background-color","red");
    });

:not(selector) 去除所有与给定选择器匹配的元素

//选择class不为one的 所有div元素
    $("#btn3").click(function(){
            $("div:not(.one)").css("background-color","red");
    });

:header 获得所有标题元素。例如：
…

//选择所有的标题元素
    $("#btn9").click(function(){
            $(":header").css("background-color","red");
    });

:animated 获得所有动画

//选择当前正在执行动画的所有元素
    $("#btn10").click(function(){
            $(":animated").css("background-color","red");
    });

:focus 获得焦点

$("input[type='text']").focus(function(){
            $(this).val("获得焦点");
    });
    $("input[type='text']").blur(function(){
            $(this).val("失去焦点");
    });

is(“条件”) 是否符合指定条件

    $("input[type='text']").on("focus blur",function(){
            if($(this).is(":focus")){
                    $(this).val("获得焦点");
            }else{
                    $(this).val("失去焦点");
            }
    });

4、内容过滤选择器：

:empty 当前元素是否为空（是否有标签体–子元素、文本）

//选取不包含子元素(或者文本元素)的div空元素
  $("#btn2").click(function(){
        $("div:empty").css("background-color","red");
});

:has(…) 当前元素是否有指定元素

 //选取子孙元素含有class为mini元素的父div元素
  $("#btn3").click(function(){
        $("div:has(.mini)").css("background-color","red");
});

:parent 当前元素是否是父元素（自己是否拥有子元素）

//选取含有子元素(或者文本元素)的div元素
  $("#btn4").click(function(){
        $("div:parent").css("background-color","red");
});

:contains( text ) 标签体是否含有指定的文本

//选取含有文本“di”的div元素
  $("#btn1").click(function(){
        $("div:contains('di')").css("background-color","red");
});

5、可见性过滤选择器：

:hidden 隐藏特指 ,获得

//选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来
$("#b2").click(function(){
        $("div:hidden").show();
});

:visible 可见（默认）

//选取所有可见的div元素
$("#b1").click(function(){
        $("div:visible").css("background-color","red");
});

//Jquery中的遍历方式
//第一种遍历方式
$("input:hidden").each(function(){
        alert($(this).val());
});

//第二种遍历方式
$.each($("input:hidden"),function(idx,value){
        alert($(this).val());
});

6、属性选择器

[属性名] 获得指定的属性名的元素

//"选取含有 属性title 的div元素." id="btn1"/>
$("#btn1").click(function(){
        $("div[title]").css("background-color","red");
});

[属性名=值] 获得属性名等于指定值得元素[1]

//"选取 属性title值等于“test”的div元素." id="btn2"/>
$("#btn2").click(function(){
        $("div[title='test']").css("background-color","red");
});

[属性名!=值] 获得属性名不等于指定值的元素

  //"选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
  $("#btn3").click(function(){
        $("div[title!='test']").css("background-color","red");
});

[as1][as2][as3]…. 复合选择器，多个条件同时成立。类似 where …and…and【2】

  //"组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
$("#btn7").click(function(){
        $("div[id][title*='es']").css("background-color","red");
});

[属性名^=值] 获得以属性值开头的元素

//"选取 属性title值 以“te”开始 的div元素." id="btn4"/>
  $("#btn4").click(function(){
        $("div[title^='te']").css("background-color","red");
});

[属性名$=值] 获得以属性值结尾的元素

  //"选取 属性title值 以“est”结束 的div元素." id="btn5"/>
  $("#btn5").click(function(){
        $("div[title$='est']").css("background-color","red");
});

[属性名*=值] 获得含有属性值的元素

  //"选取 属性title值 含有“es”的div元素." id="btn6"/>
  $("#btn6").click(function(){
        $("div[title*='es']").css("background-color","red");
});

7、子元素过滤选择器:

:nth-child(index) ，获得第几个孩子，从1开始。

//选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
 $("#btn1").click(function(){
    $("div.one :nth-child(2)").css("background-color","powderblue");
 });

:first-child ，获得第一个孩子

//选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
  $("#btn2").click(function(){
    $("div.one :first-child").css("background-color","powderblue");
 });

:last-child ，获得最后孩子

//选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
  $("#btn3").click(function(){
    $("div.one :last-child").css("background-color","powderblue");
 });

:only-child ，获得独生子

//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
$("#btn4").click(function(){
    $("div.one :only-child").css("background-color","powderblue");
 });

:first-child和:first的区别：

：first始终只会获取第一个符合条件的元素(只有一个)

：first-child：可能44获取到一堆符合条件的孩子

8、表单过滤选择器：

:input 所有的表单元素
（<input> / <select> / <textarea> / <button>）
:text 文本框
<input type="text">
:password 密码框
<input type=" password ">
:radio 单选
<input type="radio">
:checkbox 复选框
<input type="checkbox">
:submit 提交按钮
<input type="submit">
:image 图片按钮
<input type="image" src="">
:reset 重置按钮
<input type="reset">
:file 文件上传
<input type="file">
:hidden 隐藏域
<input type="hidden"> ,还可以获得<xxx style="display:none">
:button 所有普通按钮。
<button > 或 <input type="button">
select 下拉列表（没有:号）
textarea 多行文本框（没有:号）

9、表单对象属性过滤器：
- :enabled 可用

//对表单内 可用input 赋值操作./
  $("#btn1").click(function(){
    $(":input:enabled").val("aaa");
  });

:disabled

不可用。<xxx disabled="disabled"> 或<xxx disabled="">  或  <xxx disabled>
//对表单内 不可用input 赋值操作./
  $("#btn2").click(function(){
    $(":input:disabled").val("aaa");
  });

:checked 选中（单选框radio、复选框 checkbox）

//获取多选框选中的个数./
  $("#btn3").click(function(){
    alert($(":checkbox:checked").length);
  });

:selected 选择（下拉列表 select option）

//获取下拉框选中的内容./
  $("#btn4").click(function(){
    $(":select :selected").each(function(){
        alert($(this).val());
    });
  });

三、属性和CSS
属性【掌握】

attr(name) 获得指定属性名的值

$("div").attr("class"):获取div中class的属性值

attr(key ,val ) 给一个指定属性名设置值

$("div").attr("class"，“myclass”):给div设置myclass属性

removeAttr(name) 移除指定属性

$("div").removeAttr("class");   移除div设置class 属性值

Class类

addClass(“my”) 追加一个类
removeClass(“my”) 将指定类移除
toggleClass(“my”) 如果有my将移除，如果没有将添加。

HTML代码/文本/值

val() 获得value的值（<input>、<textarea>、<select>、<option>）
val(text) 设置value的值
html() 获得html代码，含有标签
html(…) 设置html代码，如果有标签，将进行解析。
text() 获得文本值，将标签进行过滤
text(…) 设置文本值，如果有标签，将被转义 --> < < & & > <

CSS Style值

css(name) 获得指定名称的css值

$("div").css("border");

css(name ,value) 设置一对值

$("div").css("border","1px solid red");

css(prop) 设置一组值

$("div").css({
        "width":"100",
         "font-size":"30"
})

CSS位置

offset() 获得坐标，返回JSON对象，{“top”:200, “left” : 100}

$("div").offset({top:100,left:100})

offset(…) 设置坐标。例如：$(this).offset({"top":0 , "left" : 0})

CSS尺寸

height() 获得或设置高度 $("div").height("100")
width()获得或设置宽度 ("div").width("100")
四、文档操作
1、内部插入(插入到某元素的里面)
A.append(B) 将B插入到A的内部后面（之后的串联操作，操作A）
```
<A>
    ....
    <B></B>
<A>
```
A.prepend(B) 将B插入到A的内部前面
```
<A>
    <B></B>
    ....
<A>
```
2、外部插入(兄弟关系)
A.insertAfter(B) , 将A插入到B后面（同级）
A.insertBefore(B) 将A插入到B前面
```
<A></A>
<B></B>
```
3、删除操作：
empty() 清空标签体（清空文本节点和子节点）
remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件或绑定数据都会被44移除
detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件或绑定数据都保留

5、复制
clone(even) 克隆

even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

6、替换
- A.replaceWith(B) ，使用B将A替换掉

$("p").replaceWith($("<div>div</div>"));

A.replaceAll(B) ，使用A替换B

$("<div>div</div>").replaceAll($("p"));

7.包裹

A.wrap(B) ，使用B将每一个A进行包裹（多个B）
```
<B><A></A></B>
<B><A></A></B>
```
A.wrapAll(B) ，使用B将所有A进行包裹（一个B）
```
<B>
    <A></A>
    <A></A>
</B>
```
A.wrapInner(B) ,使用B将每一个A的标签体包裹。
```
<A><B>。。。</B></A>
<A><B>。。。</B></A>
```
A.unwrap() ，将A的父元素删除，自己留着

收录于

Web前端学习

标签

#jquery #css #html #文档 #class

(秋招)vins中的光流法那么下一层基于这个初值也会得到一个解，就这样进行迭代，直到达到金字塔的最底层，也即第0层，就是原始分辨率的那张图片，此时光流法就会给出一个速度值，这个值是比较可靠的(相比对原始图片直接使用光流法来说)。2.小运动，这个也必须满足，就是时间的变化不会引起位置的剧烈变化，这样灰度才能对位置求偏导（换句话说，小运动情况下我们才能用前后帧之间单位位置变化引起的灰度变化去近似灰度对位置的偏导数），这也是光流法不可或缺的假定。可以看到光流法是来估计物体运动的(估计的是物体运动的速度，根据速度再计算相对应的特征点)。阅读详情

JQuery学习之jQuery九类选择器，属性，CSS和文档处理

…

相关推荐