jQuery – 3.JQuery的Dom操作
1、使用html()方法读取或者设置元素的innerHTML
2、使用text()方法读取或者设置元素的innerText
3.1 JQuery的Dom操作
1、使用html()方法读取或者设置元素的innerHTML：
alert($("#btn1").html());
$("#btn1").html("hello");
2、使用text()方法读取或者设置元素的innerText：
alert($("#btn1").text());
$("#btn1").text("hello");
3、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
alert($(“#btn1").attr("href"));
$("#btn1").attr("href", "http://www.cnblogs.com/tangge”);
4、使用 removeAttr 删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { $("#btn").click(function () { $("#link").attr("href", "http://www.baidu.com");});
$("#btn_move").click(function () {//获取属性值
//$("#link").attr("href");//删除属性值
$("#link").removeAttr("href");});
}
)
</script>
</head>
<body>
<div id="d">
<a id="link">BaiDu</a>
<input id="btn" type="button" value="Set" />
<input id="btn_move" type="button" value="remove" />
</div>
</body>
</html>
案例：图片浏览器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { var link = $("ul a"); link.click(function () {//this 触发事件的当前a标签 Dom对象
// $(this).attr("href") $("#i1").attr("src", this.href);return false;
});
})
</script>
</head>
<body>
<ul id="meinv">
<li><a href="image/1.jpg">美女1</a></li>
<li><a href="image/2.jpg">美女2</a></li>
<li><a href="image/3.jpg">美女3</a></li>
<li><a href="image/4.jpg">美女4</a></li>
</ul>
<br />
<img id="i1" src="image/1.jpg" />
</body>
</html>
对比 开始的【 DOM版：图片浏览器】
节点遍历
1.next()方法用于获取节点之后的挨着的第一个同辈元素，$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div")
2.prev、prevAll兄弟中之前的元素。
3.siblings()方法用于获取所有同辈元素，$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。
4.end()将匹配的元素列表变为前一次的状态。
//end() 返回上一次包装集被破坏之前的状态
$("#d4").nextAll().css("background-color", "blue").end().css("background-color",
"red");
5.andSelf()加入先前所选的加入当前元素中
6.案例：横向菜单，选中的项高亮显示 $(this).css();$(this).siblings().css()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#menu
{
list-style-type:none;
margin-top:50px;
margin-left:100px;
}
#menu li
{
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:Gray;
text-align:center;
cursor:pointer;
}
</style>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu li").click (function () {
$(this).css("background-color", "red").siblings().css("background-color", "Gray");
})
})
</script>
</head>
<body>
<ul id="menu">
<li>
首页
</li>
<li>
播客
</li>
<li>
相册
</li>
<li>
关于
</li>
</ul>
</body>
</html>
7.案例：评分控件。prevAll,this,nextAll
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*
{margin:0;
padding:0;
}
#rating
{list-style-type:none;
margin:50px 100px;
}
#rating li
{float:left;
width:20px;
text-align:center;
cursor:pointer;
}
</style>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { $("#rating li").mouseover(function () {//alert(1);
$(this).prevAll().andSelf().css("color", "red").end().end().nextAll().css("color", "black");//分开写（上面用链式编程）
//$(this).prevAll().andSelf().css("color", "red"); //$(this).nextAll().css("color", "black");})
})
</script>
</head>
<body>
<ul id="rating">
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
</ul>
</body>
</html>
jQuery – 3.JQuery的Dom操作的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery（3）——DOM操作
---恢复内容开始--- jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...
- jQuery学习笔记（DOM操作）
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- jQuery总结02_jq的dom操作+属性操作
一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...
- jquery学习：选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
- jQuery 第二章 实例方法 DOM操作选择元素相关方法
进一步选择元素相关方法: .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作 .end()回退操作 .get() $(&qu ...
- jquery接触初级-----juqery DOM操作 之二
DOm 操作之: 1.1 children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...
- jQuery基础知识点（DOM操作）
1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...
- jQuery使用(五)：DOM操作之插入和删除元素
插入: insertBofore() before() insertAfter() after() appendTo() append() prependTo() prepen() 删除: remov ...
- jquery接触初级-----juqery DOM操作 之一
1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...
随机推荐
- 忧桑三角形，调了半天，真忧桑TAT
忧桑三角形 试题描述 小J是一名文化课选手,他十分喜欢做题,尤其是裸题.有一棵树,树上每个点都有点权,现在有以下两个操作: 1. 修改某个点的点权 2. 查询点u和点v构成的简单路径上是否能选出三个点 ...
- OpenCv椭圆皮肤模型
Mat input_image; Mat output_mask; Mat output_image; void main() { VideoCapture cam(); if (!cam.isOpe ...
- H5canvas赛车游戏-基于lufylegend引擎
lufylegend引擎是canvas游戏中,比较简单的引擎之一,它不需要配置环境,类似引入jquery包的方式,引用对应js文件即可 lufylegend官方网站:http://www.lufyle ...
- WebStorm设置左侧菜单栏背景色和样式
WebStrom一直以来都是默认的白色主题,今天想修改了下主题皮肤,结果导致左侧项目资源栏和顶部菜单栏也变成了黑色,结果无法改变回来,网上查了各种帖子,居然也没找到解决方法,自己研究了半天,终于搞定了 ...
- jquery为新增元素添加事件
<script type="text/javascript"> var $id=1; $(function(){ $(".hehe").click( ...
- linux系统性能调优第一步——性能分析(vmstat)
linux系统性能调优第一步--性能分析(vmstat) 分类: LINUX 性能调优的第一步是性能分析,下面从性能分析着手进行一些介绍,尤其对linux性能分析工具vmstat的用法和实践进行详细介 ...
- C#之键值对
1.初始化一个键值对 //初始化定义一个键值对,注意最后的括号 Dictionary<int, string> dic = new Dictionary<int, string> ...
- POJ 1661
http://poj.org/problem?id=1661 这是一道DP的题目,求最优解 上面的这一个题是对于那个重左边开始上的函数的解释 题目要求的是从最高掉下来的小时间,那么我们就可以求从最低处 ...
- float 在内存中如何存储的
float类型数字在计算机中用4个字节存储.遵循IEEE-754格式标准: 一个浮点数有2部分组成:底数m和指数e 底数部分 使用二进制数来表示此浮点数的实际值指数部分 占用8bit的二进制数, ...
- ABAP 内表的行列转换-发货通知单-打印到Excel里-NEW
*********************************************************************** * Title : ZSDF002 ...