学jquery必会的DOM操作
来源:互联网 发布:手游网络枪战游戏大全 编辑:程序博客网 时间:2024/05/02 12:49
1.jquery查找节点
(1) 查找元素节点
var $p_txt=$(“p”).text();
alert($p_txt);
(2) 查找属性节点
Var $title =$("p").attr("title");
alert($title);
2. jquery创建节点
(1) 创建元素节点
$(“ul”).append($(“<li></li>”));
(2) 创建属性节点
$(“ul”).append($(“<li name=’orange’></li>”));
(3) 创建文本节点
$(“ul”).append($(“<li name=’apple’>苹果</li>”));
3. jquery插入节点
(1) append()相匹配的元素内部追加内容
$(“p”).append($(“苹果”));
(2) appendTo()将匹配的元素追加到指定的元素中
$(“<li name=’banana’>香蕉</li>”).appendTo(“ul”);
4. jquery删除节点
(1)根据参数删除指定的元素 remove()
$(“ul li”).remmove(“li[name=banana]”);
(2) 清空节点,只清空内容 empty()
$(“ul li[name=orange]”).empty();
5. 复制和替换节点
(1) clone()复制节点
$(“ul li”).click(function(){
$(this).clone().appendTo(“ul”);
//clone()方法,默认不复制绑定的事件,如果需要复制元素的时候也同时复制这个元素身上的事件,需要增加一个参数(true)
$(this).clone(true).appendTo(“ul”);
});
(2) 替换节点
① replaceWith()使用with后面的标签替换匹配的元素
$(“p”).click(function(){
$(“p”).replaceWith(“<span>大将军掉进</span>”);
});
② replaceAll()使用某个元素替换所有的其他的元素
$(“p”).click(function(){
$(“<span>大将军掉进</span>”).replaceAll(“p”);
});
6. 包裹节点 将某个节点,用其他标记包裹起来
(1)将所有的元素单独包裹 wrap()
$("p").click(function(){
$("ulli").wrap("<b></b>");
});
(2)将所有匹配的用一个元素来包裹 wrapAll()
$("p").click(function(){
$("ulli").wrapAll("<div></div>");
});
7. jquery属性操作
(1) 获得属性和设置属性 attr()
如果一个参数:获得这个属性的值
var $p =$("p").attr("title");
alert($p);
如果2个参数:设置这个属性的值为xxx
$("p").attr({"name":"fruit","id":"fruit1"});
(2) 删除属性 removeAttr()
$("p").removeAttr("title");
8. jquery样式操作
(1)获取样式和设置样式 attr()
$("p").click(function(){
$(this).attr("class","high");
});
(2)追加样式 addClass()
$("p").click(function(){
$(this).addClass("high");
});
(3)移除样式 removeClass()
$("p").removeClass("high");
(4)切换样式 toggle()
$(“p”).toggle(“high”);
9.设置和获取html,文本和值
(1)读取某个元素中html内容 html()
var $p = $("p").html();
alert($p);
(2)某元素中的文本内容 text()
var $p = $("p").text();
alert($p);
(3)获取某元素的值 val()
var $val =$("input").val();
$("input").val("xxx");
alert($val);
10.遍历节点
(1)取得匹配元素的子元素的集合 children()
var $body =$("body").children();
alert($body.length);
(2)取得匹配元素后面紧邻的同辈元素 next()
var $p = $("p").next();
alert($p.html());
(3)取得匹配元素前面紧邻的同辈元素 prev()
var $pre =$("ul").prev();
alert($pre.html());
(4)取得匹配元素前后紧邻的同辈元素 siblings()
var $siblings =$("ul").siblings();
alert($siblings.length);
- 学jquery必会的DOM操作
- 必会的jquery选择器
- JQuery快速学二(DOM操作)
- JQuery快速学二(DOM操作)
- jQuery 的dom操作
- jQuery 的 DOM操作
- jQuery的DOM操作
- JQuery的Dom操作
- jQuery DOM的操作
- jQuery的DOM操作
- Jquery的DOM操作
- jQuery的Dom操作
- jquery的DOM操作
- jquery的DOM操作
- Jquery的DOM操作
- JQuery的DOM操作
- jQuery的DOM操作
- jQuery的Dom操作
- 将String型的“xxxx年xx月xx日”转换成Date型
- 基于java利用JDOM读取XML文件实现简单留言簿程序
- 黑马程序员_理解编程中抽象的概念和分层的思想
- scons实践笔记(1)--hello world
- 利用位运算计算某种数据类型的最大值和最小值
- 学jquery必会的DOM操作
- 通讯录查询,模糊匹配,模糊查询
- php pack、unpack二进制流接口应用实例
- 如何识别手机系统是否为调试版本
- Failed t bind to server socket:tcp://localhost:61616 due to : java.net.BindException
- iOS ARC机制中的警告以及解决办法
- 51单片机延时程序
- ubuntu和windows共享键盘和鼠标
- 如何下载电驴网站Verycd上的资源