<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操作的更多相关文章

  1. jquery.cookie中的操作

    http://w3school.com.cn/js/js_cookies.asp jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一 ...

  2. (转)jquery.cookie中的操作

      jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一个会话cookie: $.cookie(‘cookieName’,'cooki ...

  3. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  4. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  5. [置顶] Jquery中DOM操作(详细)

    Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...

  6. jQuery中DOM操作

    1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类:      1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...

  7. jQuery笔记(二)jQuery中DOM操作

    前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...

  8. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  9. jquery学习笔记---Dom操作

    一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...

  10. 从JS和jQuery浅谈DOM操作,当我们在获取时,究竟获取了什么

    0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...

随机推荐

  1. jLink(v8)GDB 命令总结

    /** ****************************************************************************** * @author    Maox ...

  2. JAVA对象是如何占用内存的

      本文使用的是32位的JVM ,jdk1.6.本文基本是翻译的,加上了一些自己的理解,原文见文章底下链接.     在本文中,我们讨论如何计算或者估计一个JAVA对象占多少内存空间.(注意,使用 C ...

  3. linux 学习笔记2

    vi  编辑命令并查看 i 插入 esc  转换模式 shift + : x  保存并退出    q  不保存  !强制保存 五个查看命令 cat / less / more / tail / hea ...

  4. linux内核编译,内核参数修改

    核心(kernel):/boot/vmlinuz-version version 带发行包版本,本地版本内核模块(kernel object): /lib/modules/version/ 内核设计: ...

  5. CentOS-6.5安装配置JDK-7|Tomcat-8

    安装说明 系统环境:centos-6.5 安装方式:rpm安装 软件:jdk-7-linux-x64.rpm 下载地址:http://www.oracle.com/technetwork/java/j ...

  6. what is the virtual machine, when and why we need use it ?

    虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统. 通过虚拟机软件,你可以在一台物理计算机上模拟出二台或多台虚拟的计算机,这些虚 ...

  7. Python数据结构——二叉树的实现

    1. 二叉树 二叉树(binary tree)中的每个节点都不能有多于两个的儿子. 1.1 二叉树列表实现 如上图的二叉树可用列表表示: tree=['A', #root ['B', #左子树 ['D ...

  8. UVA 11059

    Given a sequence of integers S = {S1, S2, . . . , Sn}, you should determine what is the value of the ...

  9. Oracle中NULL值与索引

    NULL值是关系数据库系统布尔型(true,false,unknown)中比较特殊类型的一种值,通常称为UNKNOWN或空值,即是未知的,不确定的.由于NULL存在着无数的可能,因此NULL值也不等于 ...

  10. iOS开发学习路线图

    很多初学iOS开发的人会经常问:“我想学iOS应该从何入手呢?”.作为一个做了2年多各种iOS开发的程序员,只想写写自己的一些心得体会,好和体验与不好的体验.写的不好,请多包涵.希望能起到抛砖引玉的作 ...