jQuery详解

亦翼

已于 2023-06-14 10:59:57 修改

阅读量8.5k

点赞数 5

分类专栏：前端文章标签： jquery

于 2021-07-10 15:45:19 首次发布

本文链接：https://blog.csdn.net/Chauncey_Ren/article/details/118636124

版权

jQuery DOM操作事件处理选择器动画效果

关键词由CSDN通过智能技术生成

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简介

jQuery由美国人John Resig（约翰·莱西格）于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
例如实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码

$("tr:even").css("background-color","#ccc");

jQuery的作用

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery能做的JavaScript也能做，但使用jQuery能大幅提高开发效率
jQuery和JavaScript之间的关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库

jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性

jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可。

<script src="js/jquery-3.4.1.min.js"></script>

基本语法

<script>
	$(selector).action();
</script>

说明：

工厂函数 $() ：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素（用法基本上和css一致）
方法 action()：jQuery中提供的方法，其中包括绑定事件处理的方法 $等同于jQuery
例如：

<body>
    <p>hello</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    alert( $("p").text() );
</script>

jQuery对象 & DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

$("#title").html();
// 等同于
document.getELementById("title").innerHTML;

想混用，先转换：

DOM对象转jQuery对象

var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象

jQuery对象转DOM对象

var a = $("#name"); 	 // a是jQuery对象
var b = jqObject.get(0); // b是DOM对象

选择器

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

名称	语法构成	描述	示例
标签选择器	`element`	根据给定的标签名匹配元素	`$("h2")`选取所有h2元素
类选择器	`.class`	根据给定的class匹配元素	`$(".title")`选取所有class为title的元素
ID选择器	`#id`	根据给定的id匹配元素	`$("#title")`选取id为title的元素
并集选择器	`selector1,selector2,...,selectorN`	将每一个选择器匹配的元素合并后一起返回	`$("div,p,.title")`选取所有div、p和拥有class为title的元素
交集选择器	`element.class` 或 `element#id`	匹配指定class或id的某元素或元素集合	`$("h2.title")`选取所有拥有class为title的h2元素

<p>中国</p>
<p>武汉</p>
<p class="jy">加油</p>
<p id="wan">祖国万岁</p>
<h3 class="jy">祖国万岁</h3>
    
<script src="js/jquery-3.4.1.min.js"></script>
<script>
   //$("p").css("color","red"); 		// 标签选择器，获得所有的p
   //$(".jy").css("color","red");  		// 类选择器
   //$("#wan").css("color","red");		// ID选择器,更具备唯一性
   //$(".jy,#wan").css("color","red");	// 并集选择器，.jy和#wan
   $("h3.jy").css("color","red");	    // 交集选择器，既是h3标签，又拥有.jy的元素
</script>

层次选择器

名称	语法构成	描述	示例
后代选择器	`ancestor descendant`	选取ancestor元素里的所有descendant（后代）元素	`$("#menu span")`选取`#menu`下的`<span>`元素
子选择器	`parent>child`	选取parent元素下的child（子）元素	`$("#menu>span")`选取`#menu`的子元素`<span>`
相邻元素选择器	`prev+next`	选取紧邻prev元素之后的next元素	`$("h2+dl ")`选取紧邻`<h2>`元素之后的同辈元素`<dl>`
同辈元素选择器	`prev~sibings`	选取prev元素之后的所有siblings元素	`$("h2~dl ")`选取`<h2>`元素之后所有的同辈元素`<dl>`

<h3>000</h3>
<div id="x">
    111
    <p>p1</p>
    <div>
        <p>p2</p>
    </div>
</div>
<h3>222</h3>
<h3>333</h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
        //$("#x p").css("color","red");		// 后代选择器，忽略层级
        //$("#x>p").css("color","red");		// 子代选择器，只负责子级
        //$("#x+h3").css("color","red");	// 相邻元素选择器，下一个紧邻的兄弟h3
        $("#x~h3").css("color","red");		// 同辈元素选择器，下面的所有兄弟h3
</script>

属性选择器

语法构成	描述	示例
`[attribute]`	选取包含给定属性的元素	`$("[href]")`选取含有href属性的元素
`[attribute=value]`	选取等于给定属性是某个特定值的元素	`$("[href ='#']")`选取href属性值为“#”的元素
`[attribute !=value]`	选取不等于给定属性是某个特定值的元素	`$("[href !='#']")`选取href属性值不为“#”的元素
`[attribute^=value]`	选取给定属性是以某些特定值开始的元素	`$("[href^='en']")`选取href属性值以en开头的元素
`[attribute$=value]`	选取给定属性是以某些特定值结尾的元素	`$("[href$='.jpg']")`选取href属性值以.jpg结尾的元素
`[attribute*=value]`	选取给定属性是以包含某些值的元素	`$("[href*='txt']")`选取href属性值中含有txt的元素
`[s1] [s2] [sN]`	选取满足多个条件的复合属性的元素	`$("li[id][title=新闻]")`选取含有id和title属性为新闻的`<li>`元素

<a href="www.baidu.com">百度</a>
<a href="www.sina.com.cn">新浪</a>
<a href="http://www.163.com">网易</a>
<p href="x">哈哈1</p>
<p href="x" title="x">哈哈2</p>

<script src="js/jquery-3.4.1.min.js"></script>
<script>

    //$("[href]").css("color","red"); 			// 选取拥有href属性的元素
    //$("[href='x']").css("color","red"); 		// 选取拥有href=x的元素
    //$("a[href!='x']").css("color","red"); 	// 选取a标签中href不等于x的元素
    //$("[href^='www']").css("color","red"); 	// 选取href属性以www开头的元素
    //$("[href$='com']").css("color","red"); 	// 选取href属性以com结尾的元素
    //$("[href*='a']").css("color","red"); 		// 选取href属性包含a的元素
    $("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素

</script>

过滤选择器

语法构成	描述	示例
`:first`	选取第一个元素	`$("li:first")`选取所有`<li>`元素中的第一个`<li>`元素
`:last`	选取最后一个元素	`$("li:last")`选取所有`<li>`元素中的最后一个`<li>`元素
`:even`	选取索引是偶数的所有元素（index从0开始）	`$("li:even")`选取索引是偶数的所有`<li>`元素
`:odd`	选取索引是奇数的所有元素（index从0开始）	`$("li:odd")`选取索引是奇数的所有`<li>`元素
`:eq(index)`	选取索引等于index的元素（index从0开始）	`$("li:eq(1)")`选取索引等于1的`<li>`元素
`:gt(index)`	选取索引大于index的元素（index从0开始）	`$("li:gt(1)")`选取索引大于1的`<li>`元素（注：大于1，不包括1）
`:lt(index)`	选取索引小于index的元素（index从0开始）	`$("li:lt(1)")`选取索引小于1的`<li>`元素（注：小于1，不包括1）

<h2 id="h2#x">修仙小说</h2>
<ul>
    <li>凡人修仙传</li>
    <li>遮天</li>
    <li>神墓</li>
    <li>残袍</li>
    <li>大主宰</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>

    //$("li:first").css("color","red"); 	// 第一个li
    //$("li:last").css("color","red"); 		// 最后一个li
    //$("li:even").css("color","red"); 		// 偶数行的li
    //$("li:odd").css("color","red"); 		// 奇数行的li
    //$("li:eq(2)").css("color","red"); 	// 下标为2的li
    //$("li:gt(1)").css("color","red"); 	// 下标大于1的li
    //$("li:lt(2)").css("color","red"); 	// 下标小于2的li
    $("#h2\\#x").css("color","red"); 		// 使用转义符
</script>

事件

鼠标事件

方法	描述	执行时机
`click()`	触发或将函数绑定到指定元素的`click`事件	单击鼠标时
`mouseover()`	触发或将函数绑定到指定元素的`mouse over`事件	鼠标移过时
`mouseout()`	触发或将函数绑定到指定元素的`mouse out`事件	鼠标移出时

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">

<script src="js/jquery-3.4.1.min.js"></script>
<script>

    $("img").click( function(){
        //点击一下，换照片
        $(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
    } );

    $("img").mouseover( function(){   //移动到元素上
        $(this).css( "border","2px solid red" );
    } );
    $("img").mouseout( function(){    //离开元素
        $(this).css( "border","2px solid white" );
    } );

</script>

键盘事件

方法	描述	执行时机
`keydown()`	触发或将函数绑定到指定元素的keydown事件	按下按键时
`keyup()`	触发或将函数绑定到指定元素的keyup事件	释放按键时

<input>
<h3></h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("input").keyup( function(){
        var str = $(this).val(); // 获取框中的值
        $("h3").text( str ); 	 // 将h3元素中的文本内容更改为str
    } );
</script>

表单事件

方法	描述	执行时机
`focus()`	触发或将函数绑定到指定元素的focus事件	获得焦点
`blur()`	触发或将函数绑定到指定元素的blur事件	失去焦点

<form action="">
    <p>帐号: <input id="a" value="请输入帐号..."> </p>
    <p>电话: <input id="b"> </p>
</form>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 获得焦点（激活/点击一下）
    $("#a").focus(function(){
        $(this).val("");
    });

    // 失去焦点（未激活/未点击）
    $("#a").blur(function(){
        $(this).val("请输入帐号...");
    });
</script>

鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<img src="img/3.jpg" width="400">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").hover(
        function(){
            $(this).css("border","5px solid red");
        },
        function(){
            $(this).css("border","5px solid white");
        }
    );
</script>

连续点击复合事件

toggle()可以模拟鼠标的连续单击事件

<h2>修仙小说</h2>
<ul>
    <li>凡人修仙传</li>
    <li>遮天</li>
    <li>神墓</li>
    <li>残袍</li>
    <li>大主宰</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
  $("h2").click(function(){
      $("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
  });
</script>

事件的动态绑定

对DOM元素绑定事件的另一种写法。

绑定一个事件

$(".del").on('click', function() {
	alert('hello');
})

绑定多个事件

$(".del").on('click mouseover', function() {
	alert('hello');
})

元素的隐藏和显示

改变元素的宽高（带动画效果）

show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
  
    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <div></div>
  
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn2").click(function(){
            // fast:快速的
            // slow:缓慢的
            // 毫秒：自定义
            $("div").hide(2000); 
        });
     
        $("#btn1").click(function(){
            $("div").show('slow');
        });

        $("#btn3").click(function(){
            $("div").toggle(1000);
        });
    </script>
</body>

改变元素的高（拉伸效果）

slideDown( speed ) ：显示
slideUp( speed )：隐藏
slideToggle( speed )：等价于slideDown+slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
    $("#btn2").click(function(){
        $("div").slideUp(1000); //向上收缩
    });

    $("#btn1").click(function(){
        $("div").slideDown(1000); //向下伸展
    });

    $("#btn3").click(function(){
        $("div").slideToggle(1000); //切换
    });
</script>

不改变元素的大小（淡入淡出效果）

fadeIn( speed ) 显示
fadeOut( speed ) 隐藏
fadeToggle( speed ) 等价于fadeIn+fadeOut动画
fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
    $("#btn2").click(function(){
        $("div").fadeOut(1000); // 隐藏：淡出视线
    });

    $("#btn1").click(function(){
        $("div").fadeIn(1000); // 显示：映入眼帘
    });

    $("#btn3").click(function(){
        $("div").fadeToggle(1000); // 切换
    });

    $("#btn4").click(function(){
        $("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
    });
</script>

链

链：允许我们在同一个元素、同一条语句中运行多个jQuery方法，可以把动作/方法链接在一起。

例如：点击一次按钮，让div完成4个指定动作

背景变粉
字体变绿
收缩
拉伸

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
        color:white;
        font-size: 3em;
    }    
</style>
<body>
    <button>试试</button>
    <div>hello</div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);
        });
    </script>
</body>

DOM和CSS的操作

属性函数

attr( "属性" ) 获得元素的属性值
- attr( "属性" , "新值" ) 修改元素的属性值
- attr( 样式参数 ) ：样式参数可以写成json格式

<body>
    <button id="btn1">点我试试</button>
    <hr>
    <img src="img/1.jpg" title="图片1" width="300">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            $("img").attr("src","img/2.jpg");
            $("img").attr("title","高清无码");
            $("img").attr( {width:"200",height:"200"} );
        });
    </script>
</body>

val() 获得表单元素中的value值
- val("x") 修改表单元素中的value值
html() 获得元素中的内容（标签+文本）
- html("x") 修改元素中的内容（标签+文本）
text() 获得元素中的文本
- text("x") 修改元素中的文本

<button>试试</button>
<hr>
<input id="username">

<div>
    <h1><i>中国加油！</i></h1>
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //alert($("input").val()); 		// input框中的值
        //$("input").val("哈哈哈"); 		// 修改input框中的值   

        //alert( $("div").html() ); 	// 获得div中的内容（包含标签信息）
        //alert( $("div").text() ); 	// 获得div中的内容（不包含标签信息，只包含文本内容）
        $("div").text("祖国万岁！"); 	// 修改div中的内容（全部内容都覆盖）
    });
</script>

样式函数

css("属性") 获得该属性值
css("属性","值") 设置属性的值
css( { json} ) 设置多个属性的值

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            //var w = $("div").css("width"); // 获取css属性，width的值

            //1.一个键值对
            //$("div").css("background-color","pink");

            //2.链式编程
            //$("div").css("background-color","pink").css("border-radius","50%");

            //3.json为参数
            $("div").css({
                opacity:"0.4",
                background:"orange",
                borderRadius:"50%"
            } );
           
        });
    </script>
</body>

width() 获得元素的宽度
width( number ) 修改元素的宽度
height() 获得元素的高度
height( number ) 修改元素的高度

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            var w = $("div").width(); 	// （无参）获取宽度
            var h = $("div").height();	// （无参）获取高度
            // alert("宽:"+w+"px，高:"+h+"px");
            $("div").width("300"); 		// （传参）修改宽度
            $("div").height("300"); 	// （传参）修改高度
        });
    </script>
</body>

类样式函数

addClass() 为元素添加类样式
removeClass() 将元素的类样式移除
toggleClass() 样式的切换（有->无，无->有）

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #000;
    }   

    .a{
        background: palevioletred;
        border-radius: 50%;
    } 
    .b{
        border:5px dashed darkcyan;
        opacity: 0.6;
    }

    .cn{
       background: #000;
       color:#FFF; 
       font-family: 楷体;
    }
</style>
<body>
    <button id="btn1">试试</button>
    <button id="btn2">取消透明度</button>
    <button id="btn3">样式切换</button>
    <hr>
    <div></div>
    <h1>中华人民共和国，万岁！</h1>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            // $("div").addClass("a");
            $("div").addClass("a b");
        });

        $("#btn2").click(function(){
            $("div").removeClass("b");
        });

        $("#btn3").click(function(){
            $("h1").toggleClass("cn");
        });
    </script>
</body>

节点操作

创建节点
- 工厂函数$()用于获取或创建节点
插入节点
- 插入子节点

语法	功能
`append(content)`	`$(A).append(B)`表示将B追加到A中，如：`$("ul").append($newNode1)`
`appendTo(content)`	`$(A).appendTo(B)`表示把A追加到B中，如：`$newNode1.appendTo("ul")`
`prepend(content)`	`$(A).prepend(B)`表示将B前置插入到A中，如：`$("ul").prepend($newNode1)`
`prependTo(content)`	`$(A).prependTo(B)`表示将A前置插入到B中，如：`$newNode1.prependTo("ul")`

插入同辈节点

语法	功能
`after(content)`	`$(A).after(B)`表示将B插入到A之后，如：`$("ul").after($newNode1)`
`insertAfter(content)`	`$(A).insertAfter(B)`表示将A插入到B之后，如：`$newNode1.insertAfter("ul")`
`before(content)`	`$(A).before(B)`表示将B插入至A之前，如：`$("ul").before($newNode1)`
`insertBefore(content)`	`$(A).insertBefore(B)`表示将A插入到B之前，如：`$newNode1.insertBefore("ul")`

替换节点
- replaceWith()
- replaceAll()
复制节点
- clone()
删除节点
- remove()删除整个节点
- empty()清空节点内容

<input> <button id="test">测试</button>

<ul>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>西游记</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("#test").click(function(){
        var bookname = $("input").val();
        var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点

        /*添加子节点*/
        //$("ul").append(newli); // newli添加到ul后面
        //newli.appendTo("ul"); // newli添加到ul后面
        //$("ul").prepend(newli); // newli添加到ul前面
        //newli.prependTo("ul");

        /*添加同辈节点*/
        //$("li:last").after( newli ); // newli添加到最后的li的后面
        //newli.insertAfter("li:last");
        //$("li:last").before(newli); //newli添加到最后的li的前面
        //newli.insertBefore("li:last");

        /*替换节点*/
        //$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli
        //newli.replaceAll( "li:eq(1)" );

        /*复制节点*/
        //$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最后一个li的后面

        /*删除节点*/
        //$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失）
        $("li:eq(1)").remove(); //删除节点

    });
</script>

遍历节点

祖先元素

用于向上遍历 DOM 树

parent() 返回被选元素的直接父元素，仅上一级
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

<p><button>测试</button></p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("b").parent().html(); 		 // 找爸爸
        //var x = $("b").parents("ul").html(); 	 // 找祖宗 ul
        //var x = $("b").parents("body").html(); // 找祖宗 body
        alert( x );
    });
</script>

同辈元素

next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

<button>测试</button>
<p>p1</p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
<p>p2</p>
<p id="x">p3</p>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("ul").next().text(); 		 // 紧邻的下一个元素
        //var x = $("ul").prev().text(); 		 // 紧邻的上一个元素
        //var x = $("ul").siblings("#x").text(); // 所有的兄弟中，id=x的

        var arr = $("ul").siblings();  			 // ul的所有兄弟,1个button，3个p，2个script
        for(var i = 0 ;i< arr.length ;i++){
            alert(arr[i]);
        }
    });
</script>

后代元素

children( [selector] ) 方法返回被选元素的所有直接子元素

<button>测试</button>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
       //var x =  $("ul").children().text(); 		  // 所有子节点：abc
       var x =  $("ul").children("li:first").text();  // ul中的第一个子节点
       alert(x);
    });
</script>

find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天
        <p>共工</p>
    </li>
    <h3>祝融</h3>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("ul").find("p").text();  	// 在ul中查找p元素，忽略层级
        //var x = $("ul").find("h3").text(); 	// 在ul中查找h3元素，忽略层级
        var x = $("ul").find().text(); 		 	// find()没有传参，返回空值
        alert(x);
    });
</script>

元素的过滤

first()：过滤第一个元素
last()：过滤最后一个元素
eq(index)：过滤到下标为index的元素
not()：除了什么之外的元素
is()：返回布尔，判断是不是这种元素

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("li").first().text(); 			// 第一个li
        //var x = $("li").last().text(); 			// 最后一个li
        //var x = $("li").eq(1).text(); 			// 下标为1的li
        //var x = $("li").not("li:eq(1)").text();	// 除了下标为1的其余所有li
        var x = $("li").parent().is("ul"); 			// 返回布尔型，li的父节点是不是ul

        alert(x);
    });
</script>

亦翼

关注

5
点赞
踩
36

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery详解

文章目录Bootstrap简介概念为什么使用Bootstrap下载与使用Bootstrap的使用表格丰富的标签好看的类样式情景色类样式响应式表格表单表单布局默认布局内联布局表单控件输入框文本框复选框复选按钮单选框单选按钮按钮图片下拉菜单组件分页组件栅格系统缩略图组件模态框组件两个案例首页轮播大图响应式导航条Bootstrap简介概念Bootstrap 来自 Twitter，是目前最受欢迎的响应式前端框架。Bootstrap 基于 HTML、CSS、JavaScript，简洁灵活，使得 Web 开发
复制链接

扫一扫