jQuery之DOM

1.jQuery属性。

获取元素属性的语法:

attr(name)                   例子：$("#img1").attr("src");

设置元素单个属性的语法:

attr(key,value)             例子：$("#img1").attr("src","2.jpg");

设置元素多个属性的语法：

attr({key0:value0,key1:value1})     例子：$("#img1").attr({src:"3.jpg",title:"jQuery换了一张图片"});

通过绑定方法设置元素的属性

attr(key,function(index))               例子$：("#img1").attr("src",function(){ Math.floor(Math.random())+".jpg" });

删除元素的属性

removeAttr(name)                       例子：("#img1").removeAttr("title");

2.jQuery内容。

获取元素的HTML内容：

html()

设置元素的HTML内容：

html(value)

获取元素的文本内容：

text()

设置元素的文本内容：

text(value)

text()与html()获取到的内容有什么区别呢？   text()获取只获取文本，当该元素下有html代码时会被自动去除。

如对于代码：<div id="div1"><p>测试文本</p></div>

$("#div1").text();      获取到的是："测试文本"

而$("#div1").html();   获取到的是："<p>测试文本</p>"

对于设置而言:

$("#div1").html("<p>测试文本</p>");   实际在浏览器显示的是："测试文本"。也就是说，<p></p>会被浏览器解释。

$("#div1").text("<p>测试文本</p>");   实际在浏览器显示得是："<p>测试文本</p>"。也就是说，<p></p>也会当做文本显示出来。

3.jQuery value.

获取value：

val()                          例子：$("#input1").val();

设置value:

val(value)                   例子：$("#input1").val("确认提交");

4.jQuery css

jQuery设置单一CSS样式语法：

css(name,value)

例子：$("#div1").css("background-color","blue");     生成的代码为  <div id="div1" style=""></div>

　　　　 $("#div1").css({ "background-color":"red",color:"wihte" });　　生成的代码为<div id="div1" style="color:white"></div>

　　　　//注意一次过设置多个CSS样式时有"-"横线的css要用双引号括起来

jQuery追加CSS类别语法:   注意它还会保留原有的CSS类别

addClass(class)

例子：$("#div1").addClass("css1");    生成的代码为 <div id="div1" class="css1"></div>  生成的样式会被浏览器解释显示。

若继续执行:

$("#div1").addClass("css2");    生成的代码为 <div id="div1" class="css1 css2"></div>

jQuery切换类别语法：当元素已含有同名称的className的CSS类别时，删除该类别。如果没有则增加一个该名称的类别。

toggleClass(className)  toggleClass对于参数className的样式有则删除，无则添加。

例子1:$("#div1").toggleClass("css_1");   生成的代码为<div id="div1" class="css_1"></div>

当再次执行同样的代码$("#div1").toggleClass("css_1");  生成的代码为<div id="div1" class=""></div>

例子2：$("#div1").toggleClass("css_1");   生成的代码为<div id="div1" class="css_1"></div>

再执行：$("#div1").toggleClass("css_2");  生成的代码为<div id="div1" class="css_1 css_2"></div>    注意此处不是将css_1替换为css_2

再执行$("#div1").toggleClass("css_1");   生成的代码为<div id="div1" class="css_2"></div>

jQuery删除类别语法:   可以删除1个 多个 或 全部删除

removeClass([class])

例子：有这样一段代码<div id="div1" class="css_1"></div>

执行   $("#div1").removeClass("css_1");   执行后的代码为:  <div id="div1" class=" "></div>

有这样一段代码<div id="div1" class="css_1 css_2"></div>

执行   $("#div1").removeClass("css_1 css_2")</div>     执行后的代码为 <div id="div1" class=" "></div>

有这样一段代码<div id="div1" class="css_1 css_2"></div>

执行$("#div1").removeClass();   执行后的代码为<div id="div1" class></div>

5.jQuery创建节点

jQuery创建节点语法：

$(html)

例子：  $("<div>jQuery创建的节点</div>");    这样就创建了一个div节点。

执行一下两行代码

var dom = $("<span>jQuery创建的节点</span>");

$("#div1").append(dom);    //注意仅仅创建是无效的，必须要插入到页面内部才会生效。

执行后的结果为: <div id="div1"><span>jQuery创建的节点</span></div>

6.jQuery插入节点

内部插入节点：

append(content)    content表示追加到目标的内容

例子1:  原有代码: <div id="div1"></div>

执行  $("#div1").append("<p>jQuery插入节点</p>");  生成的代码为：<div><p>jQuery插入节点</p></div>

此处插入的是新建的节点。如果是将页面上原有的节点append()会怎么样呢？

例子2:   原有代码:

<div id="div1">第一个DIV1</div>

<div id="div2"><span id="span1">DIV2里的span1</span></div>

执行  $("#div1").append($("#span1"));

后的代码为:

<div id="div1">第一个DIV1<span id="span1">DIV2里的span1</span></div>

<div id="div2"></div>

注意到:实际上相当于把第二个div里的span移到第一个div里面了。

appendTo(content)   content表示被追加元素(一般是已经存在页面上的元素)

例子1: 原有代码 <div id="div1"></div>

$("<p>一个P元素<p>").appendTo($("#div1"));

执行后的代码为:   <div id="div1"><p>一个P元素</p></div>

例子2:原有代码:

<div id="div1"></div>

<div id="div2"><span id="span1">我是div2里的span1</span></div>

执行： $("#span1").appendTo($("#div1"));

执行后的代码为:

<div id="div1"><span id="span1">我是div2里的span1</span></div>

<div id="div2"></div>

append(function(index,html))    将一个function函数作为append方法的参数;

例子：原有代码    <div id="div1"></div>

执行:  $("#div1").append(getHtml());

function getHtml(){ return "<p>jQuery通过调用函数生成了我!</p>"; }

执行后的代码为    <div><p>jQuery通过调用函数生成了我!</p></div>    该方法常用于动态生成html再追加到页面元素中

此外插入节点的方法还有

prepend(content)

prepend(function(index,html))

prependTo(content)

这三个方法的使用与append的三个方法大致一样。主要区别是prepend在插入的时候是插入到原有内容的前面，而append是插入到原有内容的后面。

例子：

原有代码：<div id="div1">原有内容</div>

执行：$("#div1").prepend("<p>prepend插入的节点</p>").append("<p>append追加的节点</p>");

之后代码为    <div><p>prepend插入的节点</p>原有内容<p>append追加的节点</p></div>

外部插入节点：

after(content)

after(function)

before(content)

before(function)

after before与append prepend的区别是，插入的时候，after与before与被插入元素是兄弟关系，而append和prepend与被插入元素是父子关系。

例子:

原有代码 <div id="div1"><p>我是原有的P元素</p></div>

执行代码：$("#div1").prepend("<p>我是prepend函数插入的p元素</p>").append("<p>我是append函数插入的p元素</p>")

.after("<div id=\"div3\">我是after函数插入的div元素</div>").before("<div id=\"div2\">我是before插入的div元素</div>");

执行后的实际代码为

<div id="div2">我是before插入的div元素</div>

<div id="div1">

<p>我是prepend函数插入的p元素</p>

<p>我是原有的p元素</p>

<p>我是append函数插入的p元素</p>

</div>

<div id="div3">我是after函数插入的div元素</div>

外部插入节点方法2

insertAfter(content)

insertBefore(content)

例子：有如下代码

<div id="div1"><p id="p1">我是div1里面的p1里的内容</p></div>

执行代码：

$("<p>我是insertBefore方法插入的内容</p>").insertBefore($("#p1"));

$("<p>我是insertAfter方法插入的内容</p>").insertAfter($("#p1"));

执行后实际结果为

<div id="div1">

<p>我是insertBefore方法插入的内容</p>

<p id="p1">我是div1里面的p1里的内容</p>

<p>我是insertAfter方法插入的内容</p>

</div>

也就是说，insertBefore,insertAfter与before,after基本一致，只是被插入元素与插入内容位置对调了而已。

7.复制节点

clone()     复制节点元素，如果需要连元素的全部行为也进行复制，可以通过方法clone(true);

例子：原有代码：

<div id="div1"><img id="img1" src="1.jpg" /></div>

$("#img1").click(function(){

$("#img1").clone().appendTo($("#div1"));

})

当点击图片后，HTML代码变为

<div id="div1"><img id="img1" src="1.jpg"><img id="img1" src="1.jpg"></div>

在此要注意的是，虽然同样的img标签id也一样，但是点击复制出来的图片的时候，不会触发原有事件，

如果希望连事件也一样复制，只需将上面的代码clone()改为clone(true)即可，这样，复制的时候会连原有元素的行为事件也一起复制。

8.替换元素节点

replaceWith(content)

replaceAll(content)

例子：原有代码：<div><p id="p1">我是div里的p里的内容</p></div>

执行  $("#p1").replaceWith("<span>我是span里的内容</span>");

执行后的HTML代码变为 <div><span>我是span里的内容</span></div>

可以看到div里的p元素已经被span替换了。

replaceAll与replaceWith的区别不大，只是 被替换元素与替换内容倒过来而已。

例子：<div><p id="p1">我是div里的p里的内容</p></div>

执行  $("<span>我是span里的内容</span").replaceAll($("#p1"));

执行后HTML代码变为<div><span>我是span里的内容</spam></div>

9.wrap包括元素

语法：

wrap(html), wrap(elem),wrap(function)   html代表自定义字符串代码,elem代表所选中DOM元素,function代表一个函数，用函数返回的代码作为包括代码。

例子：原有的代码  <div id="div1"><p id="p1">我是div里的p元素的内容</p></div>

执行代码： $("#p1").wrap("<span></span>");

执行之后HTML代码变为<div id="div1"><span><p id="p1">我是div里的p元素的内容</p></span></div>

注意到p元素已经被<span>标签包括起来了。

例子2：原有代码：

<div id="div1">

<p id="p1">我是p1里的内容</p>

<p id="p2">我是p2里的内容</p>

</div>

执行代码：  $("#p1").wrap($("#p2"));

执行之后的结果为：

<div id="div1">

<p id="p2">

我是p2里的内容<p id="p1">我是p1里的内容</p>

</p>

<p id="p2">我是p2里的内容</p>

</div>

注意到：当选择DOM元素用wrap包裹元素的时候，是另外复制一份包裹元素的。并不是将被包裹元素移动到包裹元素里。

例子3：原有代码 <div id="div1"><p id="p1">我是p里的内容</p></div>

执行代码：

$("#p1").wrap(function(){

return "<div></div>";

})

执行之后HTML代码变为：<div id="div"><div><p>我是p里的内容</p></div></div>

移除元素的包裹元素

unwrap()  移除元素的父元素或包裹标记

例子：<div><p><span id="span1">我是span里的元素</span></p></div>

执行代码：  $("#span1").unwrap();

HTML代码变为<div><span id="span1">我是span里的元素</span></div>

注意到<span>标签外的p标签已经被移除了

内包裹，将参数中的元素在里面包裹选中的内容

语法:

wrapInner(html),wrapInner(elem),wrap(function)  html为自定义字符串代码，elem为选中的DOM元素，function表示用函数返回值作为参数。

例子：原有代码<div id="div1"><p id="p1">我是p里的内容</p></div>

执行代码：  $("#p1").wrapInner("<b></b>");

执行之后HTML变为 <div id="div1"><b><p id="p1">我是p里的内容</p></b></div>

wrapInner(elem),wrapInner(function)与wrap(elem),wrap(function)大致相同，只是包裹选中元素里面的内容而已。

语法:

wrapAll(html),wrapAll(elem)  将所选中的元素及其所有兄弟元素用参数中的代码包裹起来。

例子：

<div id="div1">

<p id="p1">我是p第一行</p>

<p>我是p第二行</p>

<p>我是p第三行</p>

</div>

执行代码:$("#p1").wrapAll("<div></div>");

执行后HTML代码变为：

<div id="div1">

<div>

<p id="p1">我是p第一行</p>

<p>我是p第二行</p>

<p>我是p第三行</p>

</div>

</div>

如果wrapAll()改为wrap()

则生成的代码为

<div id="div1">

<div><p id="p1">我是p第一行</p></div>

<div><p>我是p第二行</p></div>

<div><p>我是p第三行</p></div>

</div>

可以看到wrap()与wrapAll是不同的。wrap()是每个选中的元素都用参数中的代码包裹一次。而wrapAll是所选中的元素的所有兄弟元素都用参数中的代码包裹起来。

10.遍历元素

语法：each(callback)

例子：原有代码

<div id="div1">

<ul>

<li>第一个li</li>

<li>第二个li</li>

<li>第三个li</li>

</ul>

</div>

执行代码:

$("#div1 > ul > li").each(function(){

$(this).text("我被jQuery改了");

})

执行后HTML代码为:

<div id="div1">

<ul>

<li>我被jQuery改了</li>

<li>我被jQuery改了</li>

<li>我被jQuery改了</li>

</ul>

</div>

11.删除元素

语法：remove([expr])

empty();

例子：原有代码

<div id="div1">

<ul>

<li>第一个li</li>

<li>第二个li</li>

</ul>

</div>

事件：$("li").click(function(){

$(this).remove();

})

当点击第一个li时，生成的HTML为

<div id="div1">

<ul>

<li>第二个li</li>

</ul>

</div>

注意到第一个<li>元素已经从HTML中删除了。

如果将上面的remove()方法换成empty()方法生成的代码又是什么？

<div id="div1">

<ul>

<li></li>

<li>第二个li</li>

</ul>

</div>

由此可以看出empty()与remove()的区别是empty()仅仅是清空所选中元素的内容，并不会讲元素从HTML代码中删除，仍然保留元素所占位置。

而remove()是将元素从HTML代码中删除，并其所占位置也会被删除。

加参数的remove()例子:

<div>

<ul>

<li title="1">第一个li</li>

<li title="2">第二个li</li>

</ul>

<input id"button1" type="button" value="删除第二个li">

</div>

执行代码：

$("#button1").click(function(){

$("li").remove("li[title=2]");

})

执行之后的HTML代码为：

<div>

<ul>

<li title="1">第一个li</li>

</ul>

<input id"button1" type="button" value="删除第二个li">

</div>

时间： 2024-10-14 05:51:40

jQuery之DOM的相关文章

jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

this指的是原生js的DOM对象 .css(""):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(""):获取元素   标签名..类名.#id jQuery特点 链式编程 jq.shou(3000).html(内容) 相当于 jq.shou(3000) jq.gtml(内容) 隐式迭代 隐式实用for循环.迭代 如何使用jQuery 引包 一定要在使用之前 <script src =

原生JS与jQuery操作DOM有什么异同点？

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

jquery和dom之间的转换

刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法. 比如: $("#test").html() 意思是指:获取ID为test的元素内的html代码.其中html()是jQuery里的方法 这段代码等同于用DOM

js，jQuery和DOM操作的总结（二）

jQuery的基本操作 (1)遍历键值对和数组 var arr = [9, 8, 7, 6, 5, 4]; $.map(arr, function (ele, index) { alert(ele + '===' + index); //第一个参数是数组里面的值,第二个参数是索引 }) //=========================================// var keyWord = { "name": "老牛", "age"

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

web进阶之jQuery操作DOM元素&amp;&amp;MySQL记录操作&amp;&amp;PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 控制就是获取以及设置 <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a> <d

Jquery与DOM对象

在第一次学习jquery中,常常会不能分辨DOM对象和Jquery对象,下面我们就简诉一下它们之间的关系和区别 1.DOM对象(Document Object Model) 文档对象模型,每一份DOM都可表示为一棵树,例如下面是一个简单的网页代码: 表示为DOM为: 我们可以通过JS中的getelementsByTayName或getelementsByTayId来获取树中的节点,像这样获取到的元素就是DOM对象,DOM可以使用JS中方法,例如: var domobj=document.gete

jQuery组织您钞四----jQuery操作DOM

一.采用jQuery创建节点 节点是DOM基础设施.依据DOM产品规格,Node是一个很宽泛的概念,包含元素.属性.正文.档..实际开发过程中,要创建动态内容,主要操作的节点包括元素. 属性和文本. 看一个样例 实例4-1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

jQuery基础之（四）jQuery创建DOM元素

利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery使用$就可以直接创建DOM元素 var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript var oNewP2 = document.createElement("p"); var oTex

jQuery的dom操作(二)转

addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr() 设置或返回匹配元素的属性和值. before() 在每个匹配的元素之前插入内容. clone() 创建匹配元素集合的副本. detach() 从 DOM 中移除匹配元素集合. empty() 删除匹配的元素集合中所有的子节点. hasClass() 检查匹配的元素是否拥有指定的类. html(