jQuery 学习笔记一初体验《二》

jQuery高级应用技巧

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了jQuery中的一些高级应用技巧，包括使用map函数处理表单数据、通过closest和toggleClass实现元素样式的动态更改、利用contents和wrap对文本节点进行操作、采用切片方法和属性选择器精确定位元素等。

 //把form中的每个input元素的值建立一个列表             map 函数
        $("p").append( $("input").map(function(){  return $(this).val(); }).get().join(", "));

        // 结合 slice 选择第一个p元素 把form中的每个input元素的值建立一个列表             map 函数
        $("p").slice(0,1).append( $("input").map(function(){ return $(this).val();}).get().join(","));

       //为事件源最近的父类li对象更换样式     closest 取得与表达式匹配的最新的父元素    toggleClass 添加样式
        $(document).bind("click",function(e){ $(e.target).closest("li,div,p").toggleClass("highlight"); });

        //查找所有文本节点并加粗
        $("p").contents().not("[nodeType=1]").wrap("<b/>");

        //$("p span")功能一样  从所有的段落开始，进一步搜索下面的span元素
        $("p").find("span").toggleClass("highlight") ;

        // 收索 odd :  匹配所有索引值为奇数的元素，从 0 开始计数   even :匹配所有索引值为偶数
        $("li:odd").toggleClass("highlight");

        //$("li").slice(0,1)与$("li:first") 等同；next 后面紧邻的同辈元素，nextAll 之后的所有元素加个类
        //first 匹配找到的第一个元素; last 匹配找到的最后一个元素
        $("li:first").next().toggleClass("selected");

        //选择所有h1,h2,h3一类的header标签
        $(":header").css("background","#EEE");

        // parent取得一个包含着所有匹配元素的唯一父元素的元素集合 ,parents所有匹配元素的祖先元素的元素集合
        $("span").parent().toggleClass("selected");

        //:empty 匹配所有不包含子元素或者文本的空元素; contains 匹配包含给定文本的元素 ;last 匹配找到的最后一个元素
        $("td:empty:last").html( $("td:contains('aa')").text() );

        //:parent匹配含有子元素或者文本的元素 ; :has  匹配含有选择器所匹配的元素的元素  ; :visible :hidden  可见性过滤器
        $("td:parent:has(ol)").addClass("unselect");