JQuery之DOM操作及常用函数
属性操作
attr(name)获取属性值
var imgSrc = $(“img”).attr(“src”)
attr(name,value)设置属性值
$(“img”).attr(“src”,”images/bg.jpg”)
attr(key,function(index)) index为当前元素的索引号,整个函数返回一个字符串作为元素的属性值
$("img").attr("src",function(){ return "images/img0"+Math.floor(Math.random()*2-1)+".jpg"; }); //随机图片removeAttr(name)删除属性值
$("img").removeAttr("src"); $("img").attr({src: "test.jpg", alt: "Test Image" }); // 将一个“名/值”形式的对象设置为所有匹配元素的属性。元素获取和设置
html() 获取元素的HTML内容
html(htmlString) 设置元素的HTML内容
text() 获取元素的文本内容
text(textString) 设置元素的文本内容
val() 获取表单元素的值
val(value) 设置表单元素的值,其参数还可以为数组,如$(“:radio”).val([“radio1”,”radio2”]) 表示名字为radio1和radio2的单选框被选中
设置元素样式值
.css(name,value) 直接设置元素指定名称的css属性
同时设置多个css属性
$("p").css({ "color":"white", "background-color":"#98bf21", "font-family":"Arial", "font-size":"20px", "padding":"5px" });带函数的格式
$("div").click(function(){ //逐渐增加 div 的宽度: $(this).css( "width", function(index, value){return parseFloat(value) * 1.2;} ); });.addClass(class1class2...) 增加css类别
.removeClass(class1class2...) 移除css类别
.toggleClass(class) 切换css类别
var count = 0; $("p").click(function(){ $(this).toggleClass("highlight",count++ % 3 == 0); }); //每点击三下加上一次 ' highlight ' 类$("p").height();取得第一个匹配元素当前计算的高度值(px)。
$("p").height(20);为每个匹配的元素设置CSS高度(hidth)属性的值
$("p").width();取得第一个匹配元素当前计算的宽度值(px)。$(window).width(); 获取当前窗口的宽
$("p").width(20);为每个匹配的元素设置CSS宽度(width)属性的值
元素操作
创建节点元素
var $div = $("<div title='JQuery'>内容</div>"); $("dody").append($div);内部插入节点
内部插入,即在元素内部进行添加,作为元素的子节点。
append()和appendTo()方法
append()——其方法是将方法里面的参数添加到jquery对象中来; 如:A.append(B)的意思是将B放到A中来,后面追加,A的子元素的最后一个位置;
appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。
如:A.appendTo(B)的意思是将A放到B中去,后面追加,B的子元素的最后一个位置;
prepend()和prependTo()方法
prepend()——其方法是将方法里面的参数添加到jquery对象中来;
如:A.prepend(B)的意思是将B放到A中来,插入到A的子元素的第一个位置;
prependTo()——其方法是将jquery对象添加到prependTo指定的参数中去。
如:A.prependTo(B)的意思是将A放到B中去,插入到B的子元素的第一个位置;
append(function(index,html))
$("div").append(returnHtml); function returnHtml(){ var str = "<b>write less, domore</b>"; };外部插入节点
外部插入,即在元素外面添加,作为元素的兄弟节点;
after()和before()方法
after()——其方法是将方法里面的参数添加到jquery对象后面去; 如:A.after(B)的意思是将B放到A后面去;
before()——其方法是将方法里面的参数添加到jquery对象前面去。如:A.before(B)的意思是将B放到A前面去;
insertAfter()和insertBefore()的方法
与上面的after()和before()方法在逻辑上相反
如:A.insertAfter(B);即将A元素调换到B元素后面;
复制节点
$(selector).clone([true]);
带true参数则复制出来的节点具备原节点所绑定的事件处理程序。
替换节点
(1)replaceAll()
$(content).replaceAll(selector);
(2)replaceWith()
$(selector).repalceWith(content);
这两种方法在使用时效果完全相同,都是用content 代替 selector.
包裹节点
(1)wrap()
$(selector).wrap(wrapper); $(selector).wrap(function(){...}); $("#div2").wrap(function(){ return "<b></b>"; });(2)unwrap()
(3)wrapAll()
$(selector).wrapAll(wrapper);
(4)wrapInner()
$(selector).wrapInner(wrapper);
$(selector).wrapInner(function(){...});
总结:wrap() 和 wrapInner()的显示效果相同,不同的是前者为 seletor 添加了父节点,而后者为 selector 添加了子节点。
wrap() 和 wrapAll() 显示效果也相同,不同的是前者为 seletor 中的每一个子元素均添加父节点,而后者为整个 seletor 只添加一个父节点
删除节点
(1)remove()
$(selector).remove([selector])
$("div").remove("#div3"); //删除 div 标签
(2)detach()
$(selector).detach([selector])
(3)empty()
$(selector).empty()
remove 方法和 detach 方法的返回值均为被删除的jQuery节点对象,不同的是,前者只保留该对象节点本身,其他绑定的事件及附加的数据等都会被移除。而后者全部保留。empty 方法则是将指定节点的所有子节点删除,本身保留。
遍历DOM树
向上遍历
(1)parent()
返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
(2)parents()
返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
(3)parentsUntil()
返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){ $("span").parentsUntil("div"); }); //返回介于<span> 与<div> 元素之间的所有祖先元素向下遍历
(1)children()
返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
(2)find()
返回被选元素的后代元素,一路向下直到最后一个后代。
$(document).ready(function(){ $("div").find("span"); }); //返回属于<div> 后代的所有<span> 元素同级遍历
(1)siblings()
返回被选元素的所有同胞元素。
(2)next()
返回被选元素的下一个同胞元素。
(3)nextAll()
返回被选元素的所有跟随的同胞元素。
(4)nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素。
(5)prev(),prevAll() & prevUntil() 方法
prev(),prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素
其它函数
add() 方法将元素添加到匹配元素的集合中
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
$( document).bind("click", function( e ) { $( e.target).closest("li").toggleClass("hilight"); }); //当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景each(function(index,element))方法规定为每个匹配元素规定运行的函数
如果处理数组,第一个参数代表索引值,第二个参数代表数组元素;如果遍历JSON对象,则分别对应key值和value值;此函数还可以遍历一组DOM元素
$("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); });<script type="text/javascript" > $(document).ready(function(){ function objInit(obj){ return$(obj).html("<option>请选择</option>"); }; var OData = { //对象表示法,键值对之间用冒号分割,元素之间用逗号分割,多个元素用大括号包裹 producer1 : {brand1_1: "型号1_1_1,型号1_1_2", brand1_2: "型号1_2_1,型号1_2_2"}, producer2 : {brand2_1: "型号2_1_1,型号2_1_2", brand2_2 : "型号2_2_1,型号2_2_2"}, producer3 : {brand3_1: "型号3_1_1,型号3_1_2", brand3_2: "型号3_2_1,型号3_2_2"} }; $.each(OData,function(key){ $("#selA").append("<option>"+key+"</option>"); }); $("#selA").change(function(){ objInit("#selB"); objInit("#selC"); $.each(OData,function(key1,value1){ if($("#selA option:selected").text()== key1){ $.each(value1,function(key2,value2){ $("#selB").append("<option>"+key2+"</option>"); }); $("#selB").change(function(){ objInit("#selC"); $.each(value1,function(key2,value2){ if($("#selBoption:selected").text() == key2){ $.each(value2.split(","),function(){ $("#selC").append("<option>"+this+"</option>"); }); } }); }); } }); }); $("#bnt").click(function(){ var txt = "您选择的厂商:"; txt += $("#selAoption:selected").text()+"<br/>"; txt += "您选择的品牌:"; txt += $("#selBoption:selected").text()+"<br/>"; txt += "您选择的型号:"; txt += $("#selCoption:selected").text()+"<br>"; $("#tips").html(txt); }); }); </script><div class="clsInit"> 厂商:<select id="selA"><option>请选择</option></select> 品牌:<select id="selB"><option>请选择</option></select> 型号:<select id="selC"><option>请选择</option></select> <input type="button" value="显示"id="bnt"> </div> <div class="clsInit" id="tips"></div>has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集
<ul><li>Doesthe UL contain an LI?</li></ul>
$("ul").append("<li>"+ ($("ul").has("li").length ? "Yes" :"No") + "</li>"); $("ul").has("li").addClass("full");contains(container,contained)检测一个DOM节点是否包含另一个DOM节点
过滤函数
(1):eq(index);
获取第N个元素.这个元素的位置是从0算起。
<p> This isjust a test.</p> <p> So is this</p>
example:$(“p”).eq(1);
result:<p>So is this</p>
(2):filter(expr)
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
<p>Hello</p><p>HelloAgain</p><p class="selected">And Again</p>
example:
$("p").filter(".selected");
result:
<p class="selected">And Again</p>
(3):filter(fn)
筛选出与指定函数返回值匹配的元素集合
<p><ol><li>Hello</li></ol></p><p>Howare you?</p>
example:
$("p").filter(function(index){ return $("ol",this).length == 0; });result: <p>Howare you?</p>
(4):hasClass(class)
检查当前的元素是否含有某个特定的类,如果有,则返回true。这其实就是 is("." + class)。
<div class="protected"></div><div></div>
example: $(“div”).hasClass("protected")
result: true
(5):is(expr)
用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
<form><input type="checkbox" /></form>
explam: $("input [type='checkbox']").parent().is("form")
result: true;
(6):not(expr)
删除与指定表达式匹配的元素
<p>Hello</p><p id="selected">Hello Again</p>
example:
$("p").not($("#selected")[0] )
result: <p>Hello</p>
(8):slice(start,[end])
选取一个匹配的子集;
<p>Hello</p><p>cruel</p><p>World</p>
example:
$("p").slice(0,1).wrapInner("<b></b>");
result: <p><b>Hello</b></p>
(9)$(dom元素).index():搜索与参数表示的对象匹配的元素,并返回相应元素的索引值
(10)grep(array,function(elementOfArray,indexOfArray),[invert])
此函数用于过滤数组元素,回调函数有两个参数,分别带便待过滤数组的元素和下标,invert默认为false,如果为true代表获取与function规则相反的数组元素
$.grep(attr,function(ele,index){ return ele>5&&indexindex<8; //获取数组中元素值大于5并且序号小于8的所有元素 });JQuery对象和DOM对象相互转换
(1)$(dom元素):将一个或多个dom元素转换为jquery对象。
$(document.body).css("background", "black" ); //设置页面背景色(2)get(index) 方法获得由选择器指定的DOM 元素
$("button").click(function(){ x=$("p").get(0); $("div").text(x.nodeName + ":" + x.innerHTML); });jquery对象访问。eq返回的是jquery对象,只能使用jquery方法,get返回的是dom元素对象,只能使用dom方法.
JQuery之DOM操作及常用函数的更多相关文章
- 解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
- js,jQuery和DOM操作的总结(二)
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
随机推荐
- [Educational Codeforces Round 7]F. The Sum of the k-th Powers
FallDream dalao找的插值练习题 题目大意:给定n,k,求Σi^k (i=1~n),对1e9+7取模.(n<=10^9,k<=10^6) 思路:令f(n)=Σi^k (i=1~ ...
- 【NOIP2012-开车旅行】
这道题:你不仅要学会两人交换开车,还要做到高效驾驶. ·分析: 在拨开花哨题目的迷雾之后,发现两个重要突破口: ①从每个点开始,他们的路径是一定的,不存在决策选取. ...
- hdu 5479(括号问题)
题意:类似"()","(())","()()" 是匹配的, 而 "((", ")(", " ...
- LCD接口和RGB介绍【转】
转自:https://www.cnblogs.com/hzl6255/p/5470583.html 阅读目录 1. 介绍 2. 接口类型 3. RGB 4. YUV 5. FOURCC 回到顶部 1. ...
- C语言设计第一次作业
1 (1)题目:求圆面积和周长 (2)流程图: (3)测试数据及运行结果: (4)实验分析:暂时没问题. 2 (1)题目:输入一个四位年份,判断其是否是闰年.闰年的判别条件是该年年份能被4整除但不能被 ...
- Linux查看系统版本号及关机命令各种方法归纳
shutdown -h now 立即关机halt 立即关机init 0 立即关机poweroff 立即关机shutdown -r now 重启reboot 重启logout 注销su - 命令切换身份 ...
- IBM-x3650做RAID5更换硬盘后rebuild步骤分享
1.按Ctrl+H进入WebBIOS配置 2.点击start 3.点击Drives,对slot5进行配置 4.选择slot5,选择Properties,点击Go按钮 5.选择MakeUnconfGoo ...
- 获得只有 [年 月 日] 的Date 对象
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd"); String sDate = sim ...
- 脱离文档流两操作,float和position:absolute的区别
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...
- 正确在遍历中删除List元素
最近在写代码的时候遇到了遍历时删除List元素的问题,在此写一篇博客记录一下. 一般而言,遍历List元素有以下三种方式: 使用普通for循环遍历 使用增强型for循环遍历 使用iterator遍历 ...