锋利的JQuery-Jquery中DOM操作

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>dom</title>

</head>

<body>

    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>

    <ul>

      <li title='苹果'>苹果</li>

      <li title='橘子'>橘子</li>

      <li title='菠萝'>菠萝</li>

    </ul>

</body>

</html>

查找节点

1.查找元素节点

var $li=$("ul li:eq(1)")//获取<ul>里第2个<li>节点

var li_txt=$li.text();//获取第2哥<li>元素节点的文本内容

alert(li_txt);

2.查找属性节点

var $para=$("p");//获取<p>节点

var p_txt=$para.attr("title");//获取<p>元素节点属性titile

alert(p_txt);

创建节点

1.创建元素节点

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

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

然后将两个元素插入文档中

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

$("ul").append($li_2)；//可以采用链式方法：$("ul").append("$li_1").append("$li_2")

2.创建文本节点

var $li_1=$("<li>香蕉<li>");//创建第1个<li>元素

var $li_2=$("<li>雪梨<li>");//创建第2个<li>元素

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

$("ul").append($li_2)；//可以采用链式方法：$("ul").append("$li_1").append("$li_2")

3.创建属性节点

var $li_1=$("<li title="雪梨">雪梨<li>");//创建第1个<li>元素

var $li_2=$("<li title="香蕉">香蕉<li>");//创建第2个<li>元素

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

$("ul").append($li_2)；//可以采用链式方法：$("ul").append("$li_1").append("$li_2")

插入节点

append()	向每个匹配的元素内部追加内容
appendTo()
prepend()
prependTo()
after()
insertAfter()
before()
insertBefore()

删除节点

1.remove()方法

找到匹配元素，删除

$("ul li:eq(1)").remove();//获取第二个<li>元素借点后将他从网页后删除

该节点删除后多有后代节点同时被删除，但是这个方法返回值就是被删除节点的引用

var $li=$("ul li:eq(1)").remove();//获取第二个<li>，删除

$li.appendTo("ul")//把刚才删除的元素重新添加到<ul>

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

$("ul li").remove("li[title!=菠萝]");//将<li>元素中属性title不等于“菠萝”的<li>元素删除

2.empty()方法

清空节点里的所遇内容

$("ul li:eq(1)").empty();//获取第二个<li>元素节点后，清空次元素里的内容，注意是元素里

克隆节点

$("ul li ").click(function(){

    $(this)/clone().appendTo("ul");//复制当前单机的节点，并将他追加到<ul>元素中

})

替换节点

replaceWith()将所有匹配的元素都替换成指定的HTML或者DOM元素。

<p title="选择你最喜欢的水果">你最喜欢的水果</p>//替换成

<strong>你最喜欢的水果是？</strong>//用如下js

S("p").replaceWith("<strong>你最不喜欢的水果是？</strong>")//replaceWith

//也可以用

$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p")

包裹节点

wrap()匹配元素进行单独包裹

$("strong").wrap("<b></b>");//用<b>标签把<strong>元素包裹起来

//结果如下

<b><strong>你最不喜欢的水果是？</strong></b>

wrapAll()进行整个包裹

warpInner()方法，将子内容进行包裹

$("strong").wrapInner("<b></b>");//用<b>标签把<strong>元素包裹起来

//结果如下

<strong><b>你最不喜欢的水果是？</b></strong>

属性操作

1.获取属性

var $para=$("p");

var p_txt=$para.attr("title")//获取<p>节点属性title

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

2.删除属性

$("p").removeAttr("title");//删除属性

样式操作

1.获取和设置样式

<p class="myclass" title="选择你喜欢的水果">选择你喜欢的水果</p>

var p_class=$("p").attr("class");//获取样式

$("p").attr("class","high")//设置样式

2.追加样式

.high{

 font-weight:bold;   /* 粗体字 */

 color : red;        /* 字体颜色设置红色*/

}

.another{

 font-style:italic;

 color:blue;

}

$("input:eq(2)").click(function(){

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

});

3.样式移除

<p class="high another">test</p>

$("p").removeClass("high");//移除<p>元素中值为“high”的class

$("p").removeClass("high").removeClass("another");//移除两个元素

$("p").removeClass("high another")//同样效果

$("p").removeClass();//移除所有的class

4.切换样式

$("p").toggleClass("another")

5.判断是否含有某种样式

$("p").hasClass("another");

设置和获取HTML、文本和值

1.html()

<p class="myclass" title="选择你喜欢的水果"><strong>选择你喜欢的水果</strong></p>

var p_text=$("p").html();//<strong>选择你喜欢的水果</strong>

设置

$("p").html("<strong>你最喜欢的水果是？</strong>")

2.text()

var p_text=$("p").text();//选择你喜欢的水果

设置：

$("p").text("你最喜欢的地方")

3.val()

案例，文本框获取焦点，自动清空

 <input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>

    <input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>

    <input type="button" value="登陆"/>

 $(function(){

      $("#address").focus(function(){         // 地址框获得鼠标焦点

            var txt_value =  $(this).val();   // 得到当前文本框的值

            if(txt_value==this.defaultValue){

                $(this).val("");              // 如果符合条件，则清空文本框内容

            }

      });

      $("#address").blur(function(){          // 地址框失去鼠标焦点

              var txt_value =  $(this).val();   // 得到当前文本框的值

            if(txt_value==""){

                $(this).val(this.defaultValue);// 如果符合条件，则设置内容

            }

      })

      $("#password").focus(function(){

            var txt_value =  $(this).val();

            if(txt_value==this.defaultValue){

                $(this).val("");

            }

      });

      $("#password").blur(function(){

              var txt_value =  $(this).val();

            if(txt_value==""){

                $(this).val(this.defaultValue);

            }

      })

  });

遍历节点

1.children()只考虑子元素，不考虑后代元素

2.next()取得匹配元素后面紧邻的同辈元素。

3.prev()取得匹配元素前面紧邻的同辈元素

4.siblings()取得匹配元素前后所有同辈元素

5.closest()取得资金的匹配元素

...

CSS-DOM操作

1.offset()获取元素在当前窗口的相对偏移量。其中返回的对象包含两个属性。top，left

var offset=("p").offset();

var left=offset.left;

var top=offset.top;

2.position()方法获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移量，与offset一样。返回两个属性

var position=("p").position();

var left=position.left;

var top=position.top;

3.scrollTop和scrollLeft分别获取元素的滚动条距离顶端的距离和距离左侧的距离

var $P=$("p");

var scrollTop=$p.scrollTop();

var scrollLeft=$.scrollLeft();

还可以设置

$("textarea").scrollTop(300);

$("textarea").scrollLeft(300);

锋利的JQuery-Jquery中DOM操作的更多相关文章

jquery.cookie中的操作
http://w3school.com.cn/js/js_cookies.asp jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一 ...
（转）jquery.cookie中的操作
jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一个会话cookie: $.cookie(‘cookieName’,'cooki ...
jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作查找节点创建节点删除节点复制节点替换节点包裹节点属性操作样式操作对HTML.文本和值的操作遍历节点 CSS-DOM操作小结本 ...
jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
第1章认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
[置顶] Jquery中DOM操作（详细）
Jquery中的DOM操作为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...
jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛支持多种编程语言 2)HTML DOM:代码简短只用于处理web ...
jQuery笔记（二）jQuery中DOM操作
前言本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
jquery学习笔记---Dom操作
一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...
从JS和jQuery浅谈DOM操作，当我们在获取时，究竟获取了什么
0.写在前面的话自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...

随机推荐

CSS居中的方法整合--水平居中
原文 CSS的居中问题,是一个老生常谈的问题,各种居中方法层出不穷.是水平居中还是垂直居中?是block还是inline? 居中对象是一个还是多个?长度宽度是否确定?等等各种因素确定. 这里就从这些方 ...
CentOS-6.3安装配置Nginx
安装说明系统环境:CentOS-6.3软件:nginx-1.2.6.tar.gz安装方式:源码编译安装安装位置:/usr/local/nginx 下载地址:http://nginx.org/en/ ...
PHPExcel读取excel03/07版到数组
想总结下PHPExcel的读取excel到数组的function,用的时候直接调取,懒…… 参考了以下链接: http://www.jb51.net/article/29071.htm http:// ...
Linux编程学习笔记 -- Process
进程是一个程序的运行. 在一个程序中执行另一个执程序的方法有两种: 1)system 在shell中执行程序 2)fork + exec 复制一个进程,在进程中用新的程序替换原有的程序 for ...
java 中的匿名内部类
转自http://www.cnblogs.com/nerxious/archive/2013/01/25/2876489.html 匿名内部类也就是没有名字的内部类正因为没有名字,所以匿名内部类只能 ...
dell inspiorn 14vr 1616b ubuntu 无线网卡的问题
找到两个解决方法: 1 找网卡驱动下载: 用命令以下 from :http://zhidao.baidu.com/link?url=k6QNIdJlbRyZJSEW1cVUs_1p4Jv-73c8 ...
解决.net定时器在iis7上不执行问题
今天第一次在博客园发帖,以前一直在潜水,在这里也是学了不少东西.感谢各位园友废话不多说,这也是我工作中遇到的问题: protected void Application_Start(object s ...
【BZOJ1500】[NOI2005]维修数列
Description Input 输入的第1 行包含两个数N 和M(M ≤20 000),N 表示初始时数列中数的个数,M表示要进行的操作数目.第2行包含N个数字,描述初始时的数列.以下M行,每行一 ...
CSS定义字体间距字体行与行间距
CSS定义字体行间距 line-height:xxpx; CSS定义字体间距下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性属性含义属性值 Word-s ...
解决mysql中表字符集gbk，列字符集Latin1，python查询乱码问题
最近在公司碰到一个异常蛋疼的情况,mysql数据库中,数据库和表的字符集都是'gbk',但是列的字符集却是'latin1',于是蛋疼的事情出现了. 无论我连接字符串的`charset`设置为`gbk` ...

锋利的JQuery-Jquery中DOM操作

锋利的JQuery-Jquery中DOM操作的更多相关文章

随机推荐

热门专题