jquery接触初级-----juqery DOM操作 之一
1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM;
1.1.document.getElementById(),document.getElementsByTagName,getAttribute(),setAttribute() 这些方法属于DOM core
1.2. docuement.froms // HTML_DOM获取一个表单对象
element.src //HTML_DOM获取元素的src属性
类似这样的属于HTML_DOM
1.3.CSS_DOM针对CSS操作,CSS_DOM主要用于获取和设置style对象的各种属性
例如:element.style.color = "red" ; 设置元素的color属性
2. 查找节点:
2.1 查找元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<script>
$(function() {
var $li = $("ul li:eq(1)");
var li_txt = $li.text();
console.log(li_txt);
});
</script>
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子" class="shuoguo2">梨子</li>
<li title="香蕉" class="shuoguo3">香蕉</li> </ul>
</body>
</html>
2.2.1 查找属性节点
<script>
$(function() {
var $li = $("ul li:eq(1)");
var li_txt = $li.class;
console.log(li_txt);
});
</script>
运行结果错误:
上面的原因:写法错误,jquery的对象不能直接调用js的属性,要使用jquery的方法来调用
改正为
<script>
$(function() {
var $li = $("ul li:eq(1)");
var li_txt = $li.attr('class');
console.log(li_txt);
});
</script>
结果:
2.2.2 设置属性节点
$(function() {
var $li = $("ul li:eq(1)");
$li.attr({"data_title": "lizi","my_name": "huanying2015"});
});
运行结果:
类似 attr() 方法的还有一些,例如:html(),val(),height(),width(),text(),css()等
2.2.3 删除属性
$(function() {
var $li = $("ul li:eq(1)");
$li.removeAttr("title");
});
运行结果:
设置属性和删除属性,还可以使用prop()和removeProp() 方法进行,与attr()和removeAttr()类似
2.2.4 设置样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子">梨子</li>
<li title="香蕉" class="shuoguo3">香蕉</li>
</ul>
</body>
</html>
<script>
$(function() {
var $li = $("ul li:eq(1)");
// $li.attr("class", "nihao");
$li.addClass("nihao");
});
</script>
运行结果:attr()和addClass()当没有样式时,结果是一样的,就是上面的两种方式;
当存在一个样式时,addClass可以进行追加样式:在nihao 的基础上追加一个 huanying2015 样式
<script>
$(function() {
var $li = $("ul li:eq(1)");
$li.attr("class", "nihao");
$li.addClass("huanying2015");
});
</script>
运行结果:
2.2.5 对样式进行切换:toggleClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<style>
.nihao {
background: red;
}
</style>
<script>
$(function() {
var $li = $("ul li:eq(1)");
var Obtn = $(".btn");
Obtn.on('click', function() {
$li.toggleClass('nihao');
});
});
</script>
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子">梨子</li>
<li title="香蕉" class="shuoguo3">香蕉</li>
</ul>
<input type="button" value="切换" class="btn">
</body>
</html>
在第20行执行样式切换,运行结果:
2.2.6 判断元素是否拥有某个属性:hasClass(),现在li:eq(1)中添加属性 huanying2015
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子" class="huanying2015">梨子</li>
<li title="香蕉" class="shuoguo3">香蕉</li>
</ul>
<input type="button" value="切换" class="btn">
</body>
</html>
<script>
$(function() {
var $li = $("ul li:eq(1)");
var O_has = $li.hasClass("huanying2015");
console.log(O_has);
});
</script>
运行结果:
2.2.7 获取元素的内容:html()和text() 的区别
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子" class="huanying2015"> <strong>这是一个梨子</strong></li>
<li title="香蕉" class="shuoguo3">香蕉</li>
</ul>
<input type="button" value="切换" class="btn">
</body>
<script>
$(function() {
var $li = $("ul li:eq(1)");
var O_html = $li.html();
var O_text = $li.text();
console.log(O_html);
console.log(O_text);
});
</script>
运行结果:html()会把strong标签也打印出来,text()只打印文本内容
jquery接触初级-----juqery DOM操作 之一的更多相关文章
- jquery接触初级-----juqery DOM操作 之二
DOm 操作之: 1.1 children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...
- jquery接触初级-----juqery DOM操作实例,动态图片显示
1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...
- jquery接触初级-----juqery 动画函数
1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...
- jquery接触初级-----juqery选择器实例
jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成 这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jquery接触初级----jquery 对象和Dom对象
1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...
- 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里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...
随机推荐
- 协议无关组播--稀疏模式 PIM-SM
一. 1)PIM-SM 1.PIM-SM转发.加入 PIM-SM适合于接收成员较少的环境.它与DM有何显著的区别?先看PIM-SM转发机制. 转发: 当组播数据到达路由器时,路由器也会去创建转发项.转 ...
- 关于购物车程序的Python实现
''' 需求:1.启动程序后,输入用户名密码后,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 4.可随时退出,退出时 ...
- .net core 认证
http://www.cnblogs.com/RainingNight/p/cookie-authentication-in-asp-net-core.html
- 一个windows计划任务的Nginx日志自动截断的批处理命令
net stop nginx taskkill /im nginx.exe /f cd E:\nginx e: set NO=%Date:~0,4%%Date:~5,2%%Date:~8,2% set ...
- 非mapreduce生成Hfile,然后导入hbase当中
转自:http://blog.csdn.net/stark_summer/article/details/44174381 未实验 最近一个群友的boss让研究hbase,让hbase的入库速度达到5 ...
- python序列化模块
什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 序列化的目的 1.以某种存储形式使自定义对象持久化: 2.将对象从一个地方传递到另一个地方. 3.使程序更具维护性. ...
- 用singleton单例模式实现一个模块
对于具有唯一性的模块(例如,购物车项目中的物品数据,各个页面都要使用它,而且是唯一的数据),用singleton模式. var mySingleton = (function() { var priv ...
- Android Activity传递数据使用getIntent()接收不到,揭秘Intent传递数据与Activity启动模式singleTask的关系。
activity通过intent传递数据的时候,如果activity未启动,那么在这个刚启动的activity里通过getIntent()会获取到这个intent的数据.. 如果要启动的activit ...
- 点不到的NO
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- js常用内置对象
数组Array 1创建方式 var colors = ['red','color','yellow']; var colors2 = new Array(); 2数组的赋值 var arr = []; ...