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>

学习笔记(三):jQuery之DOM的更多相关文章

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

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

  2. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  3. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  4. amazeui学习笔记三(你来我往1)--常见问题FAQs

    amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...

  5. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  6. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  7. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  8. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  9. Oracle学习笔记三 SQL命令

    SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)  

  10. [Firefly引擎][学习笔记三][已完结]所需模块封装

    原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读:        笔记三主要就是各个模块的封装了,这里贴 ...

随机推荐

  1. 利用Eventlog Analyzer分析日志

    利用EventlogAnalyzer分析日志 ManageEngineEventLogAnalyzer是一个基于Web技术.实时的事件监控管理解决方案,能够提高企业网络安全.减少工作站和服务器的宕机事 ...

  2. hibernate generator id

    以下内容整理自网络 “assigned” 主键由外部程序负责生成,在   save()   之前指定一个.  “hilo” 通过hi/lo   算法实现的主键生成机制,需要额外的数据库表或字段提供高位 ...

  3. 如何在VMware中创建虚拟机

    今天给大家分享如何在VMware中创建虚拟机,具体的教程如下.在这里小编提前下载了Ubuntu14.04桌面系统,为后面在虚拟机中安装Ubuntu14.04桌面系统做准备. 1.从官网上或者直接百度上 ...

  4. BZOJ3294: [Cqoi2011]放棋子(计数Dp,组合数学)

    题目链接 解题思路: 发现一个性质,如果考虑一个合法的方案可以将行和列都压到一起,也就是说,在占用行数和列数一定的情况下,行列互换是不会影响答案的,那么考虑使用如下方程: $f[i][j][k]$为占 ...

  5. 使用Spring Mvc 转发 带着模板 父页面 之解决方法 decorators.xml

    周末了,周一布置的任务还没完毕,卡在了页面跳转上,接手了一个半截的项目要进行开发,之前没有人给培训.全靠自己爬代码,所以进度比較慢.并且加上之前没实用过 Spring Mvc 开发项目.所以有点吃力, ...

  6. ognl.OgnlException: target is null for setProperty(null,&quot;XXXX&quot;...)

    今天遇到了这个奇葩问题,最后来回比对了一下前辈写过的一段完整代码后才发现问题. Error大概描写叙述为: 警告: Error setting expression 'XXX' with value ...

  7. ajax动态更新下拉列表

    前面做了一个ajax的小demo,今天看一个动态更新下拉列表,或者也叫级联更新下拉列表,这个也是利用ajax的异步调用去后台实现数据请求.然后回到前台完毕下拉列表数据的更新,以增强web应用的交互性. ...

  8. 编译QCAD

    编译QCAD eryar@163.com 目前开源的二维CAD有QCAD.LibreCAD等,且LibreCAD可以说是QCAD的分支版本.对比这款开源软件,发现QCAD的功能与操作习惯和AutoCA ...

  9. 视图中使用ROWNUM要注意

    昨天晚上帮一位兄弟优化一个ebs的sql. sql有好几百行. SQL的样子是select .... from 视图 where ....过滤条件 视图的代码贴出来就不给大家看了,比較长.另外设计保密 ...

  10. 76.QT槽的机制

    按钮点击获取文本框输入 void Dialog::on_pushButton_clicked() { //获取文本输入 QString vstr = ui->lineEdit->text( ...