一个小时学会jQuery 目录

发布时间：2017-06-20 16:51:47.237 作者： IT网络文摘 (该文来自笔记，点击查看原文)

  http://www.cnblogs.com/best/p/5748515.html

调试：

seo优化培训,网络推广培训,网络营销培训,SEM培训,网络优化,在线营销培训

从上面的调试信息中可以看到foo是一个长度为1的集合，集合中下标为0的元素就是1个DOM元素（0：p#foo），上DOM示例中的foo对象完全一样；可以看出foo是对DOM元素foo的封装，使用功能更加强大，从隐式原型__proto__中的内容就可以看到，中间提供了大量的方法，事件与属性，简化操作。

2.3、DOM转换成jQuery对象

要使用jQuery中的方法与属性就需要把一个JavaScript中的DOM对象转换成jQuery对象。

转换方法一：

使用工厂方法jQuery(DOM对象)，如jQuery(document.getElementById("foo"))，是 seo优化培训,网络推广培训,网络营销培训,SEM培训,网络优化,在线营销培训方法的简写形式，也可以写成(document.getElementById("foo"))

转换方法二：

简化形式jQuery(选择器)，如jQuery("#foo")，也可以写成$("#foo")

示例如下：

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>DOM转换成jQuery对象</title>
    </head>
    <body>
        <h2>DOM转换成jQuery对象</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
        <script type="text/javascript">
        //方法一
        //在文档中获得id为foo的DOM对象
        var foo=document.getElementById("foo");        //将DOM对象转换成jQuery对象
        var $foo1=jQuery(foo);        var $foo2=$(foo);        //调用jQuery对象中的方法        $foo1.html("Foo jQuery");
        $foo2.css("color","red");        
        //方法二
        //获得文档中id为bar的DOM对象，将DOM包装成一个jQuery对象，调用jQuery方法html修改元素HTML        jQuery("#bar").html("Bar jQuery");        //为id为bar的元素设置样式，将前景色修改为蓝色        $("#bar").css("color","blue");        </script>
    </body></html>

运行结果：

seo优化培训,网络推广培训,网络营销培训,SEM培训,网络优化,在线营销培训

2.4、jQuery对象转换成DOM对象

DOM对象是jQuery对象的组成部分，jQuery对象是对DOM对象的包装升级，每一个jQuery对象都是一个集合，是一个包装集，每个包装集中可以包含0到N个DOM元素。将jQuery对象转换成DOM对象方法如下

方法一：

jQuery对象[下标]

方法二：

jQuery对象.get(下标)

示例：

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery对象转换成DOM对象</title>
    </head>
    <body>
        <h2>jQuery对象转换成DOM对象</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
        <script type="text/javascript">
        //方法一
        var $foo=$("#foo");        //从jQuery对象中获得下标为0的DOM元素，并调用DOM属性        $foo[0].innerHTML="foo DOM";        
        //方法二
        var $p=$("p");        //从jQuery对象中获得下标为1的DOM元素，并调用DOM属性        $p.get(1).innerHTML="bar DOM";        </script>
    </body></html>

运行结果：

seo优化培训,网络推广培训,网络营销培训,SEM培训,网络优化,在线营销培训

2.5、DOM对象与jQuery对象区别

DOM对象只能调用DOM方法、属性与事件；
jQuery对象只能调用jQuery方法、属性与事件；
可以将DOM转换成jQuery对象，也可以将jQuery转换成DOM对象；
$只是jQuery的别名形式；
每一个jQuery对象都是一个DOM对象的集合

三、常用选择器

通过jQuery中的选择器实际上取得的是HTML中的DOM元素。在jQuery中使用CSS匹配(CSS like)来进行元素指定，比其他JavaScript库都简单，这也正是jQuery在网页设计人员中大受欢迎的理由了。

在其核心，jQuery重点放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS，就会很清楚选择器的威力，通过元素的特性或元素在文档中的位置去描述元素组。有了jQuery，就能够利用现有知识去发挥选择器的威力，在很大程度上简化JavaScript代码。CSS中可以使用的选择器基本都可以用到jQuery中，反之不然。

3.1. 选择器和包装集

为了使设计和内容分离而把CSS引入Web技术的时候，需要以某种方式从外部样式表中引用页面元素组。开发出来的方法就是通过使用选择器—基于元素的属性或元素在HTML文档中的位置，简明地表现元素。

例如，选择器：p a

引用所有嵌套于<p>元素之内的超链接(<a>元素)组。jQuery利用同样的选择器，不仅支持目前CSS中使用的常见选择器，还支持尚未被大多数浏览器完全实现的更强大的选择器。收集一组元素，可以使用如下简单的语法：

$(selector) 或者 jQuery(selector)

也许刚开始你会觉得$()符号有点奇怪，但大部分jQuery用户很快就喜欢上它的简洁。例如，为了获取嵌套在<p>元素内的一组超链接，我们使用如下语句：

$("p a")

$( )函数返回特别的JavaScript对象，它包含着与选择器相匹配的DOM元素的数组。该对象拥有大量预定义的有用方法，能够作用于该组元素。

用编程的话来说，这种构造称为包装器(wrapper)，因为它用扩展功能来对匹配的元素进行包装。我们使用术语jQuery包装器或者包装集(wrapped set)，来指能够在其上用jQuery定义的方法去操作的、匹配元素的集合。

假定我们想选择带有CSS类notLongForThisWorld的所有<div>元素。jQuery语句如下所示：

$("notLongForThisWorld");

3.2. 基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$("#test")选取id为test的元素
.class	根据给定的类名匹配元素	集合元素	$(".test")选取所有class为test的元素
element	根据给定的元素名称匹配元素	集合元素	$("p")选取所有的<p>元素
selector1, selector2, selector3...	将每一个选择器匹配到的元素合并后一起返回	集合元素	$("div,span,p.cls")选取所有<div>，<span>和拥有class为cls的<p>标签的一组元素
*	匹配所有元素	集合元素	$("*")选取所有的元素

可以使用这些基本选择器来完成绝大多数的工作，下面我们对这些选择器一一进行讲解。

3.2.1、通过id获取元素

在CSS中经常使用id来控制元素，在jQuery中获取元素时，也使用同样方法。与CSS一样，在id前面加上#号。

语法：$("#id")

可以控制指定id的HTML元素，在HTML中有id不可重复的规定，因此可以控制文档内部惟一的元素。如果定义了多个同名的id元素，则只有最初出现的同名id有效。在JavaScript中使用document对象的getElemnetById(id)方法来获取元素，在jQuery中则更为简化。同时通过jQuery获得id对应的元素后可以调用jQuery中的相应方法对该元素进行操作，具体代码如下所示：

<script type="text/javascript" src="js/jquery-1.11.3.js"></script><div id="notMe"><p>id="notMe"</p></div><div id="myDiv">id="myDiv"</div><script>
     $("#myDiv").css("border","3px solid red");</script>

3.2.2、通过类名获取元素

在网页当中，使用class属性引用样式表中的类样式，因为类样式的可重用，所以多个元素可以引用同一个样式。在jQuery中，可以获取同一类名的多个HTML元素，编写方式同CSS，即在类名的前面加上点号。

语法：$(".className")

本例通过类名来获取元素，因为使用同一个类样式的元素可能有多个，所以通过类名来获取元素返回的将是一个数组对象，即jQuery中的包装集，然后对此包装集中的元素进行相关操作。示例代码如下所示：

  <div class="myclass">div class="notMe"</div>
  <div class="myclass otherclass">div class="myClass"</div>
  <span class="myclass otherclass">span class="myClass"</span>
  <script>
     $(".myclass.otherclass").css("border","13px solid red");  </script>

3.2.3、通过标签名获取元素

在CSS中我们通常使用标签名来为这一类标签定义样式，在jQuery中也可以用同样方法来获取标签元素。

如果使用普通JavaScript，则必须用document对象的getElementsByTagName(tagName)方法来进行元素的抓取。而jQuery方法与CSS相同，指定需要操作的标签名即可操控所有的标签。

语法：$("tagName")

示例代码如下所示：

  <div>DIV1</div>
  <div>DIV2</div>
  <span>SPAN</span>
  <script>
     $("div").css("border","9px solid red");  </script>

四、350行jQuery常用脚本

4.1、常用选择器

$('#div1')   //id为div1的节点，如<div id='div1'></div> $('span')   //所有的span结点，一个包装集$('p span')   //p标签下的所有span节点，后代节点$('p>span')   //p标签下的所有span子节点，子代节点$('.red')  //使用样式red的节点，如<span class="red"></span>$('*')  //所有节点$("div,span,p.cls")  //选取所有<div>，<span>和拥有class为cls的<p>标签的一组元素

4.2、基本筛选器

$('span:first')    //第一个节点$('span:last')     //最后一个节点$("td:even")     //索引为偶数的节点，从 0 开始$("td:odd")      //索引为奇数的节点，从 0 开始 $("td:eq(1)")    //给定索引值的节点$("td:gt(0)")    //大于给定索引值的节点$("td:lt(2)")    //小于给定索引值的节点$(":focus")      //当前获取焦点的节点$(":animated")   //正在执行动画效果的节点

4.3、内容选择器

$("div:contains('hello')")    //包含hello文本的节点$("td:empty")    //不包含子节点或者文本的空节点$("div:has(p)")  //含有选择器所匹配的节点$("td:parent")   //含有子节点或者文本的节点

4.4、表单选择器

$("input:checked") //所有选中的节点$("select option:selected") //select中所有选中的option节点$(":input") //匹配所有 input, textarea, select 和 button 节点$(":text") //所有的单行文本框$(":password") //所有密码框$(":radio") //所有单选按钮$(":checkbox") //所有复选框$(":submit") //所有提交按钮$(":reset") //所有重置按钮$(":button") //所有button按钮$(":file") //所有文件域

4.5、筛选与查找

$("p").eq(0) //当前操作中第N个jQuery对象,类似索引$('li').first() //第一个节点$('li').last() //最后一个节点$(this).hasClass("node") //节点是否含有某个特定的类,返回布尔值$('li').has('ul') //包含特定后代的节点$("div").children() //div中的每个子节点,第一层$("div").find("span") //查找div下的所有span节点$("p").next() 　　　//紧邻p节点后的一个同辈节点$("p").nextAll() //p节点之后所有的同辈节点$("#node").nextUntil("#node2") //id为"#node"节点之后到id为'#node2'之间所有的同辈节点,掐头去尾$("p").prev() //紧邻p节点前的一个同辈节点$("p").prevAll() //p节点之前所有的同辈节点$("#node").prevUntil("#node2") //id为"#node"节点之前到id为'#node2'之间所有的同辈节点,掐头去尾$("p").parent() //每个p节点的父节点$("p").parents() //每个p节点的所有祖先节点,body,html$("#node").parentsUntil("#node2") //id为"#node"节点到id为'#node2'之间所有的父级节点,掐头去尾$("div").siblings() //所有的同辈节点,不包括自己

4.6、属性操作

$("img").attr("src"); 　　　　　　 //返回文档中所有图像的src属性值$("img").attr("src","node.jpg"); //设置所有图像的src属性$("img").removeAttr("src"); 　　　//将文档中图像的src属性删除$("input[type='checkbox']").prop("checked", true); //选中复选框$("input[type='checkbox']").prop("checked", false); //不选中复选框$("img").removeProp("src"); 　　 //删除img的src属性

4.7、样式操作

$("p").addClass("selected"); 　　//为p节点加上 'selected' 类$("p").removeClass("selected"); //从p节点中删除 'selected' 类$("p").toggleClass("selected"); //如果存在就删除,否则就添加HTML代码/文本/值

4.8、内容操作

$('p').html(); 　　　　　　　　　　 //返回p节点的html内容$("p").html("Hello <b>hello</b>!"); //设置p节点的html内容$('p').text(); 　　　　　　　　　　 //返回p节点的文本内容$("p").text("hello"); 　　　　　　　//设置p节点的文本内容$("input").val(); 　　　　　　　　 //获取文本框中的值$("input").val("hello"); 　　　　 //设置文本框中的内容

4.9、CSS操作

$("p").css("color"); //访问查看p节点的color属性$("p").css("color","red"); //设置p节点的color属性为red$("p").css({ "color": "red", "background": "yellow" }); //设置p节点的color为red，background属性为yellow（设置多个属性要用{}字典形式）

4.10、定位与偏移

$('p').offset() //节点在当前视口的相对偏移,对象 {top: 5, left: 9}$('p').offset().top
$('p').offset().left
$("p").position() //节点相对父节点的偏移,对可见节点有效，Object {top: 5, left: 8}$(window).scrollTop() //获取滚轮滑的高度$(window).scrollLeft() //获取滚轮滑的宽度$(window).scrollTop('25') //设置滚轮滑的高度为25

4.11、尺寸

$("p").height(); //获取p节点的高度$("p").width(); //获取p节点的宽度$("p:first").innerHeight() //获取第一个匹配节点内部区域高度(包括补白、不包括边框)$("p:first").innerWidth() //获取第一个匹配节点内部区域宽度(包括补白、不包括边框)$("p:first").outerHeight() //匹配节点外部高度(默认包括补白和边框)$("p:first").outerWidth() //匹配节点外部宽度(默认包括补白和边框)$("p:first").outerHeight(true) //为true时包括边距

4.12、DOM内部插入

$("p").append("<b>hello</b>"); //每个p节点内后面追加内容$("p").appendTo("div"); 　　　 //p节点追加到div内后$("p").prepend("<b>Hello</b>"); //每个p节点内前面追加内容$("p").prependTo("div"); 　 //p节点追加到div内前

4.13、DOM外部插入

$("p").after("<b>hello</b>"); //每个p节点同级之后插入内容$("p").before("<b>hello</b>"); //在每个p节点同级之前插入内容$("p").insertAfter("#node"); //所有p节点插入到id为node节点的后面$("p").insertBefore("#node"); //所有p节点插入到id为node节点的前面

4.14、DOM替换

$("p").replaceWith("<b>Paragraph. </b>"); //将所有匹配的节点替换成指定的HTML或DOM节点$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的节点替换掉所有 selector匹配到的节点

4.15、DOM删除

$("p").empty(); //删除匹配的节点集合中所有的子节点，不包括本身$("p").remove(); //删除所有匹配的节点,包括本身$("p").detach(); //删除所有匹配的节点(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

4.16、DOM复制

$("p").clone() 　　//克隆节点并选中克隆的副本$("p").clone(true) //布尔值指事件处理函数是否会被复制

4.17、DOM加载完成事件

$(document).ready(function(){
    您的代码...
});//缩写$(function($) {
   您的代码...
});

4.18、绑定事件

//bind 为每个匹配节点绑定事件处理函数，绑定多个用{}。$("p").bind("click", function(){
    alert( $(this).text() );
});
$('#div1').bind({    "mouseover":function () {
         $('#div1').parent().removeClass("hide");
    },"mouseout":function () {
         $('#div1').parent().addClass("hide");
    }
});

分类导航

一个小时学会jQuery 目录

2.3、DOM转换成jQuery对象

2.4、jQuery对象转换成DOM对象

2.5、DOM对象与jQuery对象区别

三、常用选择器

3.1. 选择器和包装集

3.2. 基本选择器

3.2.1、通过id获取元素

3.2.2、通过类名获取元素

3.2.3、通过标签名获取元素

四、350行jQuery常用脚本

4.1、常用选择器

4.2、基本筛选器

4.3、内容选择器

4.4、表单选择器

4.5、筛选与查找

4.6、属性操作

4.7、样式操作

4.8、内容操作

4.9、CSS操作

4.10、定位与偏移

4.11、尺寸

4.12、DOM内部插入

4.13、DOM外部插入

4.14、DOM替换

4.15、DOM删除

4.16、DOM复制

4.17、DOM加载完成事件

4.18、绑定事件

延伸阅读

我想了解如何学习