jQuery - 小鸟系列之DOM操作

判断checkbox是否被选中

$("#checkboxID").is(":checked")

判断元素是否存在

if ( $("#elementID").length > 0 ){alert("存在");
}

属性操作

//查找属性节点
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
alert($("p").attr("title"));     //显示"选择你最喜欢的水果."
//设置单个的属性值
$("p").attr("title","新设置的属性值");
//一次性为同一个元素设置多个属性
$("p").attr({"title":"your title","name":"test"});
//删除属性
$("p").removeAttr("title");

样式操作

//追加样式
$("p").addClass("another");
//移除样式
$("p").removeClass("another").removeClass("hight");
或者
$("p").removeClass("another hight");
//移除全部样式
$("p").removeClass();
//切换操作(控制元素重复切换显示)
$("#btnsearch").click(function(){$("#pLike").toggle(function(){//显示元素},function(){//隐藏元素});
});
//切换样式(如果类名存在则删除它，如果类名不存在则添加它)
$("#btnsearch").click(function(){$("p").toggleClass("another");   //重复切换类名"another"
});
//判断是否含有某个样式
$("p").hasClass("another");

节点操作

<ul><li title='苹果'>苹果</li><li title='橘子'>橘子</li><li title='菠萝'>菠萝</li>
</ul>var newli1=$("<li title='香蕉'>香蕉</li>");
var newli2=$("<li title='柿子'>柿子</li>");
$("ul").append(newli1).append(newli2);  //类似插入节点方法还有 appendTo(),prepend(),prependTo(),after(),insertAfter(),before(),insertBefore()//删除节点
$("ul li:eq(1)").remove();  //获取第2个<li>元素节点后，将它从网页中删除
$("ul li").remove("li[title!=菠萝]");  //将<li>元素中属性title不等于"菠萝"的<li>元素删除//清空节点
$("ul li:eq(1)").empty();  //获取第2个<li>元素节点后，清空此元素里的内容//复制节点
$("ul li").click(function(){$(this).clone(true).appendTo("ul");  //true, 表示复制元素的同时复制元素中所绑定的事件
});//替换节点
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");  //p标签被替换掉了
$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");  //和上面替换效果一样//包裹节点
$("p").wrap("<b></b>");       //将所有的元素进行单独包裹
$("p").wrapAll("<b></b>");    //将所有匹配的元素用一个元素来包裹
$("p").wrapInner("<b></b>");  //将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来

设置和获取HTML、文本和值

//获取和设置元素的HTML内容
$("p").html();                //获取<p>元素的HTML代码
$("p").html("<strong>你最不喜欢的水果是?</strong>");    //设置<p>元素的HTML代码//获取和设置元素中的文本内容
$("p").text();                            //获取<p>元素的文本内容
$("p").text("你最不喜欢的水果是?");     //设置<p>元素的文本内容//获取和设置元素的值
$("#txtID").val();
$("#txtID").val("");
//val() 还可以使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的选项被选中
//select(下拉列表框)
$("#selectID").val("选择2号");      $("#selectID").val(["选择2号","选择3号"]);   //选择2号,选择3号为value值
//checkbox(多选框)
$(":checkbox").val(["check2","check3"]);   //check2,check3为value值
//radio(单选框)
$(":radio").val(["radio2"]);                //radio2为value值

遍历节点

//children()
//用于取得匹配元素的子元素集合    children()方法只考虑子元素而不考虑任何后代元素
var body = $("body").children();
var p = $("p").children();
var ul = ("ul").children();
alert(body.length);             //2
alert(p.length);                //0
alert(ul.length);               //3
for (var i = 0,len = ul.length; i < len; i++) {alert(ul[i].innerHTML);     //循环输出<li>元素的HTML内容
};//next()     //用于取得匹配元素后面紧邻的同辈元素
//从DOM数的结构中可以知道<p>元素的下一个同辈节点是<ul>,因此可以通过next()方法来获取<ul>元素
$("p").next();//prev()       //用于取得匹配元素前面紧邻的同辈元素
$("ul").prev();//siblings()  //用于取得匹配元素前后所有的同辈元素
$("p").siblings();

CSS-DOM操作

$("p").css("color");                                 //获取<p>元素的样式颜色
$("p").css("color","red");                            //设置<p>元素的样式为红色
$("p").css({"fontSize":"30px","backgroundColor":"#888888"});          //设置多个样式属性//设置透明度
$("p").css("opacity","0.5");//offset()                        //获取元素在当前视窗的相对偏移
var offset = $("p").offset();
alert(offset.left);             //左偏移
alert(offset.top);              //右偏移

jQuery - 小鸟系列之DOM操作相关推荐

jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
JQuery 基础 jq选择器 dom操作
目录 JQuery 基础: (***) window.onload 和 $(function) 区别 1. 基本选择器 1. 标签选择器(元素选择器) 2. id选择器 3. 类选择器 2. 层级 ...
JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
ihtml2document能不能根据id获取dom_回到基础：什么是DOM及DOM操作？
译者:前端小智来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...
什么是DOM及DOM操作？
什么是 DOM ? DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准. W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本 ...
超详细的jQuery的 DOM操作，一篇就足够！
摘要:今天来和大家分享有关jQuery框架中DOM操作的相关技术,又是一个堪称DOM"全家桶"系列的讲解,建议收藏关注认真学习! 本文分享自华为云社区<[JQuery框架]超 ...
jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
[jQuery学习系列四 ]4-Jquery学习四-事件操作
[jQuery学习系列四 ]4-Jquery学习四-事件操作前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷 ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...

jQuery - 小鸟系列之DOM操作

jQuery - 小鸟系列之DOM操作相关推荐

最新文章

热门文章