【原】《锋利的JQuery》读书笔记(二)
1、DOM:Document Object Model 文档对象模型
2、DOM的分类:DOM Core,HTML DOM,CSS DOM
3、创建节点:
var $li_1= $("<li title='香蕉'>香蕉</li>");
$("ul").append($li_1);
4、插入节点
<1>append() 内部追加内容
<2>appendTo() append()的反操作
<3>prepend() 内部前置内容
<4>prependTo() prepend()的反操作
<5>after() 外部追加内容
<6>insertAfter() after的反操作
<7>before() 外部前置内容
<8>insertBefore() before的反操作
5、删除节点
remove() 删除节点
empty() 清空节点内容
6、复制节点
clone()
7、替换节点
replaceWith()
replaceAll()————replacewith()的反操作
8、包裹节点
wrap() ——例 $("strong").wrap("<b></b>")
wrapAll()
wrapInner————标签内容包裹
9、属性操作
【1】获取属性
var p=$para.attr("title");
【2】设置属性
$para.attr("title","yourtitle") 单个
$para.attr({"title":"yourtitle","name":"test"}) 多个
【3】删除属性
$("p").removeAttr("title");
10、样式操作
【1】获取class
var p_class=$("p").attr("class");
【2】设置class
$("p").attr("class","high");
【3】追加class
$("p").addClass("another");
【4】移除样式
$("p").removeClass("high"); 移除单个样式
$("p").removeClass("high anther"); 移除多个样式
【5】切换样式
toggleClass() 类名存在则删除,不存在则添加
【6】判断样式是否存在
$("p").hasClass("anther") 等价于 $("p").is(".anther")
11、设置与获取HTML
【1】html():获取,设置
【2】text():获取,设置
【3】val():获取,设置 ,选中下拉列表、多选框、单选框
12、遍历节点
【1】children() 取子元素 (不包括后代元素)
【2】next() 取后面紧邻的同辈元素
【3】prev() 取前面紧邻的同辈元素
【4】siblings() 取前后所有同辈元素
【5】closet() 取最近的匹配元素
13、CSS-DOM操作
【1】获得样式
var color= $("p").css("color");
【2】设置单个样式
$("p").css("color","red");
【3】设置多个样式
$("p").css({"fontSize":"30px","backgroundColor":"#888"});
本文出处:http://www.cnblogs.com/ytaozhao 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。