`
还有也许
  • 浏览: 169232 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

jQuery 学习(二)

 
阅读更多

主要学习jQuery对象的获取:

一、jQuery核心函数--jQuery():

     以例子为主,首先是页面:

<div id="yzw" onclick="test();">你好,JQuery!</div>

  

具体 js的写法:

  

//页面初始化加载
$(function (){
            alert("页面加载完毕");
            //获取所有的<div.../> 标签对应的DOM对象
            $("div").append("新增的内容");
            //使用HTML字符串创建一个DOM对象,并将其放入body元素内
            $("<input type='button' value='按钮'/> ").appendTo(document.body);
            //直接将一个DOM对象包装称jQuery对象
            $(document.getElementById('yzw')).css("background-color","#fffff").css("border","1px solid balck");
 });

 

其中 $(function (){

    

}); 函数用于页面初始化,非常常用。

 

二、以CSS访问器访问DOM元素

   具体方法太多,只书写了一些常用的实例:

页面元素:

<ul>
       <li id="java">java</li>
       <li id="javaee" class="test">javaee</li>
       <li id="ajax">ajax</li>
       <li id="xml">xml</li>
       <li id="ejb">ejb</li>
       <li ><span id="workflow">workfolw</span></li>
    </ul>

 

响应的js:

 

           //以CSS选择器访问DOM元素
           $("#java").append("<b> 是 id为java的元素");
           //获取所有包含id属性的<li.../>元素,为他们增加背景颜色
           $("li[id]").css("background-color","#bbbbff");
           //获取class属性为test的元素,并为他们增加边框
           $(".test").css("border","3px dotted black");
           //同时获取id 为 xml,workflow的元素
           $("#xml,#workflow").append("<b>获得id 为xml,workflow 的元素</b>");
           //同时获取id 为xml,workflow的元素
           $("ul #workflow").append("<br/><b>位于ul之内的,id为workflow的元素");
           //
           $("ul>#ajax").append("<b>ul之内,id为ajax的子元素</b>");
           //获取id为ajax之后的所有li元素
           $("#ajax~li").css("background-color","#ff5555");

 三、选择器和附加限定词混合使用

   html页面和以前一样

   js如下:

  

//访问ul中li的第一个元素
            $("ul>li:first").append("<b>是ul元素之内的第一个li子元素</b>");
            //访问ul元素之内没有id属性的li子元素
            $("ul>li:not([id])").append("<b>是ul之内没有id属性的元素</b>");
            $("ul>li:even").append("ul元素中索引为奇数的li子元素").css("background-color","yellow");
            $("ul>li:gt(4)").append("<br/><b>是ul元素之内,索引大于4的li子元素</b>").css("border","1px dashed black");
            //访问ul元素之内且包含span元素的li子元素
            $("ul>li:has('span')").append("<br/><b>是ul元素之内,且包含span元素的li子元素</b>");
            //访问li元素之内且可见的span子元素
            $("li>span:visible").append("<br/><b>是ul元素之内,且可见的span子元素</b>").css("background-color","#bbbbbb");

 

还有一些比较特殊的附件限定词:

  

//访问页面中的第1、4、7...个li元素
            $("li:nth-child(3n+1)").css("border","1px dashed black");
            //
            $("span:only-child").append("<b>是作为父元素唯一子元素的span元素</b>");
            // 测试:first和:first-child之间的关系
            alert($("ul>li:first").html()==$("ul>li:first-child").html());   //返回true

 

以上介绍到此。

 

 

分享到:
评论

相关推荐

    jquery经典学习手册

    ### 二、jQuery的基本用法 1. **引入jQuery库**:通常,我们会通过在HTML文档的`&lt;head&gt;`标签内引入jQuery库的CDN链接或本地文件。 ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; `...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    JQuery学习资料与源代码

    **jQuery学习资料与源代码详解** jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这个压缩包中的"JQuery学习资料与源代码"包含了从基础到进阶...

    jquery手册jquery的学习jquery的学习

    二、jQuery选择器 jQuery的选择器类似于CSS选择器,用于选取HTML元素。例如,`$("#id")`选择ID为"id"的元素,`$(".class")`选择所有class为"class"的元素,`$("tag")`选择所有tag类型的元素。jQuery还支持更复杂的...

    jquery学习资料

    **jQuery学习资料** jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画制作等任务变得更加简单。本资料包包含了jQuery的学习资源,包括PPT教程和...

    jquery 教程 jQuery学习资料 jQuery学习

    二、jQuery API jQuery API_CHM.CHM文件包含了jQuery的完整文档,其中详细列出了jQuery的所有函数、方法和属性。以下是一些关键API的简介: 1. `$()`: 这是jQuery的主要构造函数,用于创建jQuery对象,通常用于包裹...

    [jQuery实战第二版].pdf

    总之,《jQuery实战第二版》不仅为初学者提供了一个系统学习jQuery的起点,也为有经验的开发者提供了一个深入研究和提高技能的宝贵资源。通过本书的学习,读者可以更好地掌握jQuery的强大功能,并将其应用于实际项目...

    jquery学习大全

    **jQuery学习大全** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。作为初学者,了解并掌握jQuery是成为Web开发高手的重要步骤。本资源包"jQuery学习大全...

    jquery学习文档

    ### jQuery学习文档知识点详解 #### 一、jQuery简介 jQuery是一种快速、简洁的JavaScript库,其设计宗旨是为了简化HTML文档遍历、事件处理、动画以及Ajax交互等常见操作。通过一个简洁的API,jQuery使开发者能够...

    jquery 学习手册

    这部“jQuery学习手册”旨在为初学者提供一个全面且易懂的教程,涵盖jQuery的核心概念、属性、选择器、事件、CSS操作、文档处理、效果和筛选等多个关键领域。 **一、jQuery核心** jQuery的核心是其简洁的API(应用...

    jquery 学习笔记

    **jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...

    从零开始学习jQuery

    ### 二、jQuery选择器 1. **ID选择器**:使用`$("#id")`选择具有特定ID的元素。 2. **类选择器**:使用`$(".class")`选择具有特定类名的元素。 3. **元素选择器**:使用`$("element")`选择所有特定类型的元素。 4. *...

    jquery学习ppt和实例

    **jQuery学习PPT和实例详解** 在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本资料包“jQuery学习ppt和实例”提供了深入学习jQuery的详细内容,...

    jquery学习笔记.rar

    《jQuery学习笔记详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的语法和强大的功能,深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery,无论你是初学者还是有...

    jQuery学习资料

    ### jQuery学习资料详解 #### 一、jQuery简介与基本用法 **jQuery** 是一个快速、简洁的JavaScript库,使得用户能更方便地处理HTML文档、事件、实现动画效果,并且方便地为网站提供AJAX交互。jQuery的核心功能是...

    Jquery学习资源

    **jQuery学习资源** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。自2006年发布以来,jQuery已经成为了前端开发的标准工具之一,因其简洁的语法和丰富的功能而...

    锋利的jQuery(第二版)内附源码及实例+学习jQuery所需的.js文件

    《锋利的jQuery(第二版)》是一本深入解析jQuery技术的权威著作,它为读者提供了全面、系统的学习路径,帮助开发者充分利用jQuery的强大功能。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理...

Global site tag (gtag.js) - Google Analytics