`

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

 
阅读更多
 //把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");
分享到:
评论

相关推荐

    jquery笔记大全

    jQuery初体验 ##### 2.1 简单动画效果 除了DOM操作之外,jQuery还提供了一系列丰富的动画效果。比如,我们可以使用`.fadeIn()`、`.fadeOut()`、`.slideUp()`和`.slideDown()`等方法来添加基本的动画效果。 **...

    jQuery- 课堂笔记.pdf

    在jQuery的初体验中,我们可以看到如何给按钮绑定点击事件。例如,下面的HTML代码创建了一个id为"btnId"的按钮: ```html &lt;button id="btnId"&gt;SayHello ``` 为了使用jQuery,首先需要在HTML文档中引入jQuery库,...

    JavaScript 学习笔记集和代码库

    JavaScript,一种广泛应用于Web开发的脚本语言,是前端开发的核心技术之一。...无论你是初入JavaScript的世界,还是希望深化对这门语言的理解,这个学习笔记集和代码库都能为你提供丰富的学习素材和实践案例。

    老男孩教育前端笔记

    【老男孩教育前端笔记】是源自知名IT教育机构——老男孩教育的一份前端学习资料,主要涵盖第14和15周的课程内容。这些笔记是深入理解和掌握前端开发技术的重要资源,尤其对于初学者或者想要提升前端技能的开发者来说...

    手机端时间选择插件mobiscroll.zip

    1. **跨平台兼容性**:设计之初就考虑到了多平台支持,包括iOS、Android、Windows Phone以及各种现代浏览器,确保在各种设备上都能提供一致的用户体验。 2. **触摸优化**:针对触摸设备进行了深度优化,滑动选择...

    chrome-note-app:chrome原生笔记应用

    Chrome Note App 是一个基于Google Chrome浏览器的原生应用,它利用了Chrome的Web存储和API功能,提供了一种便捷的方式在浏览器上创建、编辑和管理个人笔记。这款应用是用JavaScript编程语言开发的,这使得它能够...

    notes-app-[removed]笔记应用程序突出显示JavaScript

    在深入学习和理解这些JavaScript相关技术的同时,开发者也需要关注性能优化、代码可维护性、可访问性(accessibility)以及跨浏览器兼容性等问题,以确保应用的健壮性和用户体验。对于初学者,可以从简单的DOM操作和...

    front-end-notes

    jQuery是一个广泛使用的库,它简化了DOM操作和事件处理,是初学者入门的良好选择。 七、性能优化与跨平台开发 前端开发不仅要考虑用户体验,还需要关注性能优化,如减少HTTP请求、压缩资源、利用缓存等策略。随着...

    nnecec.github.io

    这个网站可能包含了作者关于JavaScript编程的教程、示例代码、学习笔记以及与前端开发相关的资源分享。JavaScript是一种广泛用于Web开发的脚本语言,它允许在浏览器端执行,为用户提供动态交互体验。 首先,...

    notefeed:我们的CodeDay Chicago 2014项目的存储库!

    JavaScript的使用意味着它可能利用了AJAX进行异步数据通信,使用了各种JavaScript库和框架(如jQuery、React、Angular或Vue.js)来提高开发效率和用户体验。此外,项目可能还包含了HTML和CSS文件,构建了应用的结构...

Global site tag (gtag.js) - Google Analytics