jQuery操作DOM详解

一、DOM操作的分类

1.DOM Core简介：

DOMCore并不属于javaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。
javaScript中的getElementById(),getElementsByTagName(),getAttribute()和setAttribute()等方法，这些都是DOM core的组成部分。
使用DOMCore来获取表单对象的方法：document.getElementsByTagName("form");
获取某元素的src属性的方法：element.getAttribute("src");

2.HTML-DOM简介

在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。HTML-DOM的出现甚至比DOM core还要早，它提供了一些更简明的记号来描述各种

HTML元素的属性。

获取表单对象的方法：document.forms

获取某原是的src属性的方法：element.src

3.CSS-DOM简介

CSS-DOM是针对CSS的操作。

如：设置某元素style对象字体颜色的方法:element.style.color = "red"

二、jQuery中的DOM操作

1.查找元素节点

<p title="选择你最喜欢的水果.">你最喜欢的水果？</p>
    <ul>
        <li title=‘苹果‘>苹果</li>
        <li title=‘橘子‘>橘子</li>
        <li title=‘菠萝‘>菠萝</li>
    </ul>

    //获取<ul>里第二个<li>节点的文本内容并且打印出来
    alert($(‘ul li:eq(1)‘).text());

2.查找属性节点

通过attr(attributeName)方法来获取它的各种属性

    //获取p元素的title属性值
    alert($(‘p‘).attr(‘title‘));

3.2.2创建节点

1.创建元素节点 $(html)
例：要创建两个li元素节点，并且要把它们作为ul元素节点的子节点添加到DOM节点数上。

解题步骤：

创建两个li新元素
将这两个新元素插入文档中

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回：

    var $li_1 =  $("<li></li>");//创建第一个li元素
    var $li_2 =  $("<li></li>");//创建第二个li元素

    可以使用jQuery的append()等方法将两个新元素插入文档中。

    $("ul").append($li_1).append($li_2); //添加到ul节点中，使之能在网页中显示

动态创建的新元素节点不会自动添加到文档中，而是需要使用其他方法将其插入文档中

2.创建文本节点
var $li_2 =  $("<li title="香蕉">香蕉</li>");

    $("ul").append($li_2);

3.2.3插入节点

3.2.3.1append() 向每个匹配的元素内部追加内容
<p>我想说</p>
    $("p").append("<b>你好</b>");
    结果
    <p>我想说<b>你好</b></p>
3.2.3.2appendTo() 将所有匹配的元素追加到指定的元素中。与appdend方法正好反方向
<p>我想说</p>
    $("<b>你好</b>").appendTo("p");
    结果
    <p>我想说<b>你好</b></p>
3.2.3.3prepend() 向每个匹配的元素内部前置内容
<p>我想说</p>
    $("p").prepend("<b>你好</b>");
    结果
    <p><b>你好</b>我想说</p>
3.2.3.4prependTo()
<p>我想说</p>
    $("<b>你好</b>").prependTo("p");
    结果
    <p><b>你好</b>我想说</p>
3.2.3.5after()添加到匹配元素标签结束符后面
$("p").after("<b>你好</b>");
    结果
    <p>我想说</p><b>你好</b>
3.2.3.6insertAfter()用法与after方法反方向
3.2.3.7before()在每个匹配的元素之前插入内容
    $("p").before("<b>你好</b>");
    结果
    <b>你好</b><p>我想说</p>
3.2.3.8insertBefore()

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。

3.2.3.9对原有的DOM元素进行移动
    var $one_li = $("ul li:eq(1)");
    var $two_li = $("ul li:eq(2)");

    $two_li.insertBefore($one_li);//移动节点

3.2.4删除节点

1.remove()方法

从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。

删除后，所有后代节点将同时删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

另外remove方法也可以通过传递参数来选择性的删除元素，

$("ul li").remove("li[title!=菠萝]");
2.empty()方法：

empty方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

3.2.5复制节点

复制节点也是常用的DOM操作之一，

商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并2将其跟随鼠标移动，从而达到以下购物效果

clone()
    clone(true) 绑定事件也被传递

    $("ul li").click(function(){
    $(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中
})

3.2.6替换节点

1.replaceWith():将所有匹配的元素都替换成指定的HTML或者DOM元素。
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
2.replaceAll():与replaceWith使用反过来
$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
3.注意事项

如果在替换之前，已经为元素绑定事件，替换后原来绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件

3.2.7包裹节点

如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap().

1.wrap()方法
$("strong").wrap("<b></b>");//用b标签把strong元素包裹起来
2.wrapInner()方法
$("strong").wrapInner("<b></b>");//用b标签把strong元素里面的内容包裹起来

3.2.8属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性

1.1.获取和设置属性attr()
var $para = $("p");//获取p节点
    var p_txt = $para.attr("title")//获取p元素节点属性title

    $("p").attr("title","your title");//设置单个的属性值

    设置多个属性值

    $("p").attr({"title":"your title","name":"test"});

    jQuery中还有很多方法都是同一个函数实现获取和设置的。html(),text(),height(),width(),val()css()等
2.删除属性removeAttr()
$("p").removeAttr("title");//删除p元素的属性title

3.2.9样式操作

1.获取样式和设置样式
获取样式 var p_class = $("p").attr("class"); //获取p元素的class
    设置样式 $("p").attr("class","high");//设置p元素的class为high
2.追加样式:addClass(“样式名称”);
<p class="abc"></p>

    $("p").addClass("wen");

    <p class="abc  wen"></p>

    两个样式合并， wen样式中与abc样式中有同样的属性时，以后wen为准。
3.移除样式removeClass()
$("p").removeClass("high");

    $("p").removeClass("high").removeClass("another");

    $("p").removeClass("high  another"); 移除class中 high和another样式

    $("p").removeClass(); //移除p元素所有class属性
4.切换样式toggleClass()

样式切换toggleClass(“another”):如果another类名存在则删除它，不存在则添加它。

$toggleBtn.toggle(function(){//显示元素
    代码①
},function(){
    //隐藏元素
    代码②
})
    toggle()方法此处作用是交替执行代码①和代码②两个函数。
5.判断是否含有某个样式hasClass(“another”)
hasClass("another"):存在class为another则返回true，不存在则返回false

3.2.10 设置和获取HTML、文本和值

1.html()方法：
<p title="选择你最喜欢的水果."><strong>你最喜欢的水果？</strong></p>

    alert($("p").html());//获取p节点中的内容，包括html元素。弹出的内容为<strong>你最喜欢的水果？</strong>

    $("p").html("<strong>你最最最喜欢的水果是？</strong>");//设置p节点中的内容，原来内容被覆盖，

    注意：该方法可以用于XHTML文档，但不能用于XML文档
2.text()方法
与javaScript的innerText属性类似。用来读取或者设置某个元素中的文本内容

    alert($("p").text());//获取p节点中的内容，包括html元素。弹出的内容为你最喜欢的水果？

    $("p").text("<strong>你最最最喜欢的水果是？</strong>");//设置p节点中的内容，原来内容被覆盖，标签也会当做文本输出

    注意：javascript中的innerText属性并不能再Firefox浏览器下运行，而jquery的text()方法支持所有的浏览器

    text()方法对HTML文档和XML文档都有效
3.val()方法

此方法类似于javaScript中的value属性，可以用来设置和获取元素的值。

<script type="text/javascript">
$(function(){//网页加载时
    $(‘#address‘).focus(function(){//获得地址焦点时
    var txt_value = $(this).val();//获取地址文本框的值
    if(txt_value=="请输入邮箱地址"){
        $(this).val("");
    }
    })

    $(‘#address‘).blur(function(){//失去地址焦点时
    var txt_value = $(this).val();//获取地址文本框的值
    if(txt_value==""){
        $(this).val("请输入邮箱地址");
    }
    })

    //对密码框进行操作
    $(‘#password‘).focus(function(){//获得密码焦点时
    var txt_value = $(this).val();//获取密码文本框的值
    if(txt_value==this.defaultValue){//使用defaultValue属性
        $(this).val("");
    }
    })

    $(‘#password‘).blur(function(){//失去密码焦点时
    var txt_value = $(this).val();//获取密码文本框的值
    if(txt_value==""){
        $(this).val(this.defaultValue);
    }

    })

})

        </script>

  <body>
    <input type="text" id="address" value="请输入邮箱地址" />
    <input type="text" id="password" value="请输入邮箱密码"/>
    <input type="button" value="登录"/>
  </body>
this指向当前的文本框，this.defaultValue就是当前文本框的默认值

通过上面的例子可以发现val()方法，不仅能设置元素的值，也能获取元素的值。

另外，val()方法还有另外一个用处，就是它能使select、checkbox和radio相应的选项被选中，在表单操作中会经常用到。

下面构建一个网页演示val()方法该功能

        <select id="single">
        <option>选择1号</option>
        <option>选择2号</option>
        <option>选择3号</option>
    </select>
    <hr>
    <select id="multiple" multiple="multiple" style="height:120px;">
        <option selected="selected">选择1号</option>
        <option>选择2号</option>
        <option>选择3号</option>
        <option>选择4号</option>
        <option selected="selected">选择5号</option>
    </select>
    <hr>
    <input type="checkbox" value="check1" />多选1
    <input type="checkbox" value="check2" />多选2
    <input type="checkbox" value="check3" />多选3
    <input type="checkbox" value="check4" />多选4
    <hr>
    <input type="radio" value="radio1" />单选1
    <input type="radio" value="radio2" />单选2
    <input type="radio" value="radio3" />单选3

    如果要使第1个下拉框的第2项被选中
    $("#single").val("选择2号");
    $("#single option:eq(1)").attr("selected",true);//与上面一样
    如果要使下拉列表的第2项和地3项被选中
    $("#multipe").val(["选择2号","选择3号"]);

    $(":checkbox").val(["check2","check3"]);//选择多选按钮的check2，和check3

    $(":radio").val(["radio2"]);//选择单选按钮中radio2被选中
    $("[value=radio2]:radio").attr("checked",true);//与上面一样

    在jQUery中，val方法是从最后一个选项往前读取，如果选项的value或者text中任意一项符合就会被选中。
    例如

    <option value="选择2号">选择1号</option>
    <option value="选择1号">选择2号</option>
    无论使用val("选择1号")还是val("选择2号")，都会选中后面一个。

3.2.11遍历节点

1.children()方法
该方法用于取得匹配元素的子元素集合
该方法只考虑子元素而不考虑任何后代元素
2.next()方法
该方法用于取得匹配元素后面紧邻的同辈元素。
3.prev()方法
用于取得匹配元素前面紧邻的同辈元素
4.sublings()方法
用于取得匹配元素前后所有的同辈元素
5.closest()
它用来取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都找不到则返回一个空的jquery对象。

6.给目标元素的最近的li元素添加颜色

$(document).bind("click",function(e){
    $(e.target).closest("li").css("color","red");
})

3.2.12CSS-DOM操作

无论是外部，还是内联都能够通过css()方法提取、设置属性值

css();


    $("p").css("color","red");//设置p元素的样式颜色为红色
    $("p").css({"fontSize":"30px","backgroundColor":"#888888"});

    注意：如果值是数字，将会被自动转化为像素值。
    在css方法中，如果属性中带有-符号，将-符号后面的首字母大写，总之，最好是加上引号。

    对透明度的设置，可以直接使用opacity属性。

     $("p").css("opacity","0.5");//将p元素设置为半透明

    如果需要获取某个元素的height属性，可以通过如下代码实现

    $(element).css("height");
    $("p").height();

    height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px，如果要用其他单位，则必须传递一个字符串。

    注意：在jquery1.2版本以后的height()方法可以用来获取window和docment的高度。
    两者的区别是：css()方法获取的高度值与样式的设置有关，可能会得到auto，也可能得到10px之类的字符串；而height()方法获取的高度值则是元素在页面中的实

际高度，与样式的设置无关，并且不带单位

    width()方法，与height()方法类似。
1.offset()方法

它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

获取p元素的偏移量，jQuery
    var offset = $("p").offset();
    var left = offset.left;//获取左偏移
    var top = offset.top; //获取上偏移
2.position()方法

获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。

3.scrollTop()方法和scrollLeft()方法
分别是获取元素的滚动条距顶端的距离和距左侧的距离。例如使用下面的代码获取p元素的滚动条距离。

var $p = $("p");
    var scrollTop = $p.scrollTop();//获取元素的滚动条距顶端的距离
    var scrollLeft = $p.scrollLeft();//获取元素的滚动条距左侧的距离
    另外，为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。

三、案例研究—某网站的超链接和图片提示效果

1.超链接提示效果

浏览器已经自带了超链接提示，只需在超链接中加入title属性就可以了。

然后这个提示效果的响应速度是非常缓慢的，考虑到良好的人机交互，需要的是当鼠标移动到超链接的那一瞬间就出现提示。这时就需要移除标签中的title提示

效果，自己动手做一个类似功能的提示。

首先在空白页面上，添加两个普通超链接和两个带有class的超链接。

<p>
        <a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a>
    </p>
    <p>
        <a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a>
    </p>
    <p>
        <a href="#"  title="这是自带的超链接提示1.">提示1.</a>
    </p>
    <p>
        <a href="#"  title="这是自带的超链接提示2.">提示2.</a>
    </p>

然后为class为tooltip的超链接添加mouseover和mouseout事件，jQuery代码如下：

$("a.tooltip").mouseover(function(){
    //显示title
}).mouseout(function(){
    //隐藏title
});

实现这个效果的具体思路如下：

(1)当鼠标滑入超链接

①创建一个div元素，div元素的内容为title属性的值

②将创建的元素追加到文档中

③为它设置x坐标和y坐标，使它显示在鼠标位置的旁边。

(2)当鼠标滑出超链接时，移除div元素

$(function(){//网页加载时运行

    $("a.tooltip").mouseover(function(e){
    //显示title

    var tooltip = "<div id=‘tooltip‘>" + this.title + "起作用了</div>";//创建<div>

    $("body").append(tooltip);//将它追加到文档中

    $("#tooltip").css({
            "top" : e.pageY + "px",
            "left" : e.pageX + "px",
            "position":"absolute"

    }).show("fast");//设置x，y坐标和位置属性并且显示
}).mouseout(function(){
    //隐藏title
    $("#tooltip").remove();//移除
});
})

此时的效果有两个问题：首先是当鼠标滑过后，标签中的title属性的提示也会出现：

其次是设置x和y坐标的问题，由于自制的提示与鼠标的距离太近，有时候会引起无法提示的问题(鼠标焦点变化引起mouseout事件)。

为了移除标签中的title提示功能，需要进行以下几个步骤。

(1)当鼠标滑入时，给对象添加一个新属性，并把title的值传给这个属性，然后清空属性title的值。

(2)当鼠标滑出时，再把对象的myTitle属性的值又赋给属性tile。

为了解决第2个问题，需要重新设置提示元素的top和left的值。

解决了两个问题后的代码：

$(function(){//网页加载时运行
    var x = 10;//鼠标值的x偏移量
    var y = 20;//鼠标值的y偏移量
    $("a.tooltip").mouseover(function(e){
    //显示title
    this.myTitle = this.title;
    this.title = "";

    var tooltip = "<div id=‘tooltip‘>" + this.myTitle + "起作用了</div>";//创建<div>

    $("body").append(tooltip);//将它追加到文档中

    $("#tooltip").css({
            "top" : (e.pageY + y ) + "px",
            "left" : (e.pageX + x ) + "px",
            "position":"absolute"

    }).show("fast");//设置x，y坐标和位置属性并且显示
}).mouseout(function(){
    //隐藏title
    this.title = this.myTitle;
    $("#tooltip").remove();//移除

});
})

此时，鼠标滑入和滑出显示已经没有问题了，但当鼠标在超链接上移动时，提示效果并不会更随鼠标移动。如果需要提示效果更随鼠标一起移动，可以为超链接加上

一个mousemove事件，解决在超链接上问题后的代码如下：

$(function(){//网页加载时运行
    var x = 10;//鼠标值的x偏移量
    var y = 20;//鼠标值的y偏移量
    $("a.tooltip").mouseover(function(e){
    //显示title
    this.myTitle = this.title;
    this.title = "";

    var tooltip ="<div id=‘tooltip‘>" + this.myTitle + "起作用了</div>";//创建<div>

    $("body").append(tooltip);//将它追加到文档中

    $("#tooltip").css({
            "top" : (e.pageY + y ) + "px",
            "left" : (e.pageX + x ) + "px",
            "position":"absolute"

    }).show("fast");//设置x，y坐标和位置属性并且显示
}).mouseout(function(){
    //隐藏title
    this.title = this.myTitle;
    $("#tooltip").remove();//移除

}).mousemove(function(e){
    //超链接上,
    //必须修改位置的值。
    $("#tooltip").css({
            "top" : (e.pageY + y ) + "px",
            "left" : (e.pageX + x ) + "px",

    });
});
})

完整的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>

        <script src="jquery-1.11.3.js" type="text/javascript">      

        </script>

    <script type="text/javascript">
$(function(){//网页加载时运行
    var x = 10;//鼠标值的x偏移量
    var y = 20;//鼠标值的y偏移量
    $("a.tooltip").mouseover(function(e){
    //显示title
    this.myTitle = this.title;
    this.title = "";

    var tooltip = "<div id=‘tooltip‘>" + this.myTitle + "起作用了</div>";//创建<div>

    $("body").append(tooltip);//将它追加到文档中

    $("#tooltip").css({
            "top" : (e.pageY + y ) + "px",
            "left" : (e.pageX + x ) + "px",
            "position":"absolute"

    }).show("fast");//设置x，y坐标和位置属性并且显示
}).mouseout(function(){
    //隐藏title
    this.title = this.myTitle;
    $("#tooltip").remove();//移除

}).mousemove(function(e){
    //超链接上,
    //必须修改位置的值
    $("#tooltip").css({
            "top" : (e.pageY + y ) + "px",
            "left" : (e.pageX + x ) + "px",

    });
});
})

        </script>

  </head>

  <body>

    <p>
        <a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a>
    </p>
    <p>
        <a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a>
    </p>
    <p>
        <a href="#"  title="这是自带的超链接提示1.">提示1.</a>
    </p>
    <p>
        <a href="#"  title="这是自带的超链接提示2.">提示2.</a>
    </p>

  </body>
</html>

2.图片提示效果

稍微修改上面的代码，就可以做出一个图片的提示效果。

首先在空白网页中加入图片，HTML代码如下：

<ul>
        <li><a href="images/phone2.png" class="tooltip" title="iphone手机"><img  src="images/phone.png" alt="iphone手机" ></a></li>
        <li><a href="images/man1.jpg" class="tooltip" title="man"><img  src="images/logo.png" alt="logo" ></a></li>
    </ul>

我们只要稍稍修改一下上面的代码就可以实现了。

var tooltip ="<div id=‘tooltip‘>" + this.myTitle + "起作用了</div>";//创建<div>

    改为：
    var tooltip ="<div id=‘tooltip‘><img src=‘"+this.href+"‘ alt=‘产品预览图‘/></div>";//创建<div>

为了使效果更为人性化，还需要添加说明文字，即图片下面还有相应的介绍文字

可以根据超链接的title属性值来获取图片相应的介绍文字；

解决关键代码如下：

this.myTitle = this.title;
    this.title = "";
    var imgTitle = this.myTitle?"<br />" + this.myTitle : "" ;//如果标题存在就取标题，不存在就没有介绍文字。
    var tooltip ="<div id=‘tooltip‘><img src=‘"+this.href+"‘ alt=‘产品预览图‘/>" + imgTitle + "</div>";//创建<div>

图片预览的全部代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>

        <script src="jquery-1.11.3.js" type="text/javascript">      

        </script>

    <script type="text/javascript">
$(function(){//网页加载时运行
    var x = 10;//鼠标值的x偏移量
    var y = 20;//鼠标值的y偏移量
    $("a.tooltip").mouseover(function(e){
    //显示title
    this.myTitle = this.title;
    this.title = "";

    var imgTitle = this.myTitle?"<br />" + this.myTitle : "" ;//如果标题存在就取标题，不存在就没有介绍文字。
    var tooltip ="<div id=‘tooltip‘><img src=‘"+this.href+"‘ alt=‘产品预览图‘/>" + imgTitle + "</div>";//创建<div>

    $("body").append(tooltip);//将它追加到文档中

    $("#tooltip").css({
            "top" : (e.pageY + y ) + "px",
            "left" : (e.pageX + x ) + "px",
            "position":"absolute"

    }).show("fast");//设置x，y坐标和位置属性并且显示
}).mouseout(function(){
    //隐藏title
    this.title = this.myTitle;
    $("#tooltip").remove();//移除

}).mousemove(function(e){
    //超链接上,
    //必须修改位置的值
    $("#tooltip").css({
            "top" : (e.pageY + y ) + "px",
            "left" : (e.pageX + x ) + "px",

    });
});
})

        </script>

  </head>

  <body>

    <ul>
        <li><a href="images/phone2.png" class="tooltip" title="iphone手机"><img  src="images/phone.png" alt="iphone手机" ></a></li>
        <li><a href="images/man1.jpg" class="tooltip" title="man"><img  src="images/logo.png" alt="logo" ></a></li>
    </ul>
  </body>
</html>

四、总结

本结开始介绍了什么是DOM，然后介绍了DOM操作分为DOM Core操作、HTML-DOM操作和CSS-DOM操作，以及它们的功能和用法，然后详细地介绍了jquery中的DOM操作，例如：如何创建节点、设置属性等，最后以一个超链接提示和图片提示作为案例，加深对DOM的理解。

时间： 2024-09-29 01:51:41

jQuery操作DOM详解的相关文章

jquery操作select详解(取值,设置选中)

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr(&qu

Angularjs 事件指令 input 相关指令 和样式指令 DOM 操作指令详解

Angularjs 事件指令 input 相关指令 和样式指令DOM 操作指令详解学习要点:1. AngularJs 事件指令2. input 相关指令3. 样式指令4. DOM 操作指令5. ngBind/ngBindHtml/ngBindTemplate 重点6. ng-init ng-mode ng-model-options ng-controler 1. Angularjs 事件指令自己研究:ng-click/dbclickng-mousedown/upng-mouseenter/le

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac

Jquery ajax 参数 详解

Jquery ajax 参数主要如下: url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基础作出了一些说明,建议在阅读本文前首先阅读前文,这里 Kayo 再引用前文的重要内容. “jQuery Mobile 在基于本地事件上,创建了一系列的自定义事件,大部分事件是基于触摸设备的使用情况开发的,当然这些事件对于桌面环境也会有适当的处理,开发者可以使用 bind() 函数绑定到需要的页面对象中. 值得

jquery的css详解（二）

jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ style: function( elem, name, value, extra ) { // Don't set styles on text and comment nodes if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ||

jQuery操作Dom、jQuery事件机制、jQuery补充部分

jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要修改的属性,就会进行修改,如果没有,直接添加 例:$("a").attr("href","http://www.baidu.com"); 修改多个属性值: //attr(obj) $(“img”).attr({ “title”: ”文件名称”, “s

jQuery选择器代码详解（八）——addCombinator函数

function addCombinator(matcher, combinator, base) 1.源码 function addCombinator(matcher, combinator, base) { var dir = combinator.dir, checkNonElements = base && dir === "parentNode", doneName = done++; return combinator.first ? // Check a

jQuery选择器代码详解（二）——select方法

原创文章,转载请注明出处,多谢! /* * @param selector 已去掉头尾空白的选择器字符串 * @param context 执行匹配的最初的上下文(即DOM元素集合).若context没有赋值,则取document. * @param results 已匹配出的部分最终结果.若results没有赋值,则赋予空数组. * @param seed 初始集合 */ function select(selector, context, results, seed) { var i, to