jQuery中的DOM操作学习笔记
来源:互联网 发布:雨课堂教学软件 编辑:程序博客网 时间:2024/04/28 20:40
首先构建一个网页,因为每张网页都能用DOM表示出来,每一份DOM都可以看作一个DOM树。
//省略其他代码<p title = "选择你最喜欢的水果">你最喜欢的水果是?</p><ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li><ul>//省略其他代码
查找节点
1、查找元素节点
var $li = $("ul li:eq(1)"); // 获取ul里第二个节点var $li_txt = $li.text(); //获取元素的文本内容
2、查找属性节点
使用attr()获取各种属性的值,参数可以是一个也可以是两个,当一个时,是要查找的属性名字。
var $para = $("p");var $p_txt = $para.attr("title"); //获取元素节点属性title
创建节点
1、创建元素节点
$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
var $li = $("<li></li>"); //创建元素$("ul").append($li); //添加到节点中,使之能在网页中显示
2、创建文本节点
var $li = $("<li>香蕉</li>");$("ul").append($li);
创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法添加到文档中。
3、创建属性节点
创建属性节点与创建文本节点类似,也是直接在创建节点时一起创建。
var $li = $("<li title='香蕉'>香蕉</li>");$("ul").append($li);
插入节点
append(),向每个匹配的元素内部追加内容,$(“p”).append(“你好“)。
appendTo(),将所有匹配的元素追加到指定元素中,实际上是
你好我想
prependTo(),颠倒prepend()。
after(),在每个匹配的元素之后插入内容。$(“p”).after(““),结果:。
insertAfter(),颠倒after()。
before(),在每个匹配的元素之前插入内容。
insertBefore(),颠倒before()。
这些插入节点的方法不仅能将新创建的DOM元素插入到文档中,也能对原来的DOM元素进行移动。
删除节点
remove(),删除所有的匹配元素,该节点的所有后代节点全部被删除,返回值是一个指向已被删除的节点的引用,因此以后可以继续使用。
var $li = $("ul li:eq(1)").remove(); //获取第二个li节点,将他从网页中删除$li.appendTo("ul"); //把刚才删除的节点又重新添加到ul元素中$("ul li").remove("li[title!=菠萝]"); //将title不等于菠萝的li元素删除
detach(),也是从DOM中去掉所有匹配的元素,但需要注意的是,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。
$("ul li").click(function(){ alert($(this).html());})var $li = $("ul li:eq(1)").detach(); $li.appendTo("ul"); //重新追加此元素,发现他之前绑定的事件还在,如果使用remove(),之前绑定的事件将失效
empty(),清空节点,他能清空元素中的所有后代节点,是清空元素里的所有内容。
复制节点
$(ul li).click(function(){ $(this).clone().append("ul"); //复制当前点击的节点,并将它追加到ul中})
在clone()中传入一个参数true,表示复制元素的同时复制元素所绑定的事件。
替换节点
replaceWith(),将所有匹配的元素都替换成指定的HTML或者DOM。
replaceAll(),颠倒的replaceWith()。
注意:如果元素已经绑定了事件,替换之后原先绑定的事件将会消失。
包裹节点
wrap(),将某个节点用其他标记包裹起来。
$("strong").wrap("<b></b>"); //<b><strong></strong></b><br/><b><strong></strong></b>
wrapAll(),将所有匹配的元素用一个元素来包裹,如果被包裹的元素间有其他元素,其他元素会被放到包裹元素之后。wrap()是将所有元素单独包裹。
$("strong").wrapAll("<b></b>"); //<b><strong></strong><br/><strong></strong></b>
wrapInner(),将每一个匹配元素的子元素(包括文本节点)用其他结构化的标记包裹起来。
属性操作
$("p").attr("title","one"); //设置单个的属性值$("p").attr({"title":"one","name":"two"}); //设置多个属性
removeAttr(),删除属性。
样式操作
$("p").addClass("another"); //给p元素追加“another”类,不会覆盖原来的class属性,变为两个属性值
css有如下两条规则:
(1)、如果给一个元素添加多个class值,那么久相当于合并了他们的样式;
(2)、如果有不同的class设定了同一样式属性,则后者覆盖前者。
$("p").removeClass("high"); //移除p元素中值为high的class$("p").remove("high another"); //移除多个class名$("p").remove(); //移除p元素的所有class
$toggleBtn.toggle(function(){ //toggle(),控制行为上的重复切换 //代码1,显示元素 },function(){ //代码2隐藏元素})
如果元素原来是显示的,则隐藏他;如果元素原来是隐藏的,则显示他。
hasClass(),判断元素中是否含有某个class,如果有则返回true,否则返回false。
设置和读取HTML、文本和值
1、html(),读取或设置某个元素的html内容,类似于innerHTML属性;
2、text(),读取或设置某个元素中的文本内容,类似于innerText属性;
3、val(),获取和设置元素的值,类似于value属性。
$("#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("请输入邮箱地址"); }});
val()能使select、checkbox、radio相应的选项被选中。
遍历节点
childern(),获取匹配元素的子元素集合(不考虑其他后代元素);
next(),获取匹配元素后面紧临的同辈元素;
prev(),获取匹配元素前面紧邻的同辈元素;
siblings(),取得匹配元素前后所有的同辈元素;
closest(),取得最近的匹配元素,首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。如果什么都没都没找到,返回一个空jQuery对象。
- jQuery学习笔记-----jQuery中的DOM操作
- jQuery中的DOM操作学习笔记
- 学习笔记《锋利的jQuery》-jQuery中的DOM操作
- jQuery学习笔记 — jQuery中的DOM操作
- JavaWeb学习笔记——jquery中的dom操作
- jQuery 学习笔记 (jQuery DOM的操作)
- JQuery学习笔记-JQuery的DOM操作
- jquery学习笔记之DOM操作
- JQuery之DOM操作学习笔记
- 【jQuery学习笔记---------DOM操作复制元素】
- jQuery学习笔记(二) DOM操作
- jQuery学习笔记之Dom操作
- jQuery学习笔记之DOM节点操作
- jQuery学习笔记之DOM操作
- 《锋利的jQuery》学习笔记---第3章 jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- Redis与Memcached的区别
- linux设备驱动归纳总结(二):模块的相关基础概念
- Android 解析Json 和Json数组 以及Gson的简单应用
- 登录窗口
- Android Service与Activity之间通信的几种方式
- jQuery中的DOM操作学习笔记
- APK安装调用
- input file上传图片预览(查看图片大小,类型,名字)------------------------------自己动手写jQuery插件
- js用 window.location.href跳转IE和chrome中路径url不一致问题
- GENYMOTION问题之an error occurred while deploying a file install_failed_no_machine_abis
- 数据结构之线性表
- 修改apk必读-反编译后的文件夹详解
- 鞍点
- 题目69