WEB_BASIC---07jQuery概述、jQuery选择器、jQuery操作DOM

最新推荐文章于 2024-09-06 10:19:06 发布

mind_programmonkey

最新推荐文章于 2024-09-06 10:19:06 发布

阅读量401

点赞数

文章标签： jQuery概述 jQuery选择器 jQuery操作dom

本文链接：https://blog.csdn.net/Mind_programmonkey/article/details/79823806

版权

javaweb的学习路径同时被 2 个专栏收录

84 篇文章

订阅专栏

javaweb封神之路

54 篇文章

订阅专栏

1.jQuery
(1)jQuery介绍
jQuery是一个js框架(jquery.js)，它的特点是利用选择器查找要操作的节点(dom对象)，然后将找到的节点封装成一个jQuery对象。通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。
这样做的好处是：代码有更好的兼容性，另外，代码也会更加简洁。
(2)jQuery对象与dom对象之间如何转换
1)dom对象 ---> jQuery对象
$(dom对象);
2)jQuery对象 ---> dom对象
方式一
$obj.get(0);
方式二
$obj.get()[0];
(3)选择器 select
1)基本选择器
#id
.class
element
select1,select2..selectn
*
2)层次选择器
select1 select2 考虑所有后代
select1>select2 只考虑子节点
select1+select2 下一个兄弟
select1~select2 下面所有兄弟
3)过滤选择器
A,基本过滤选择器
:first
:last
:not(select)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
B,内容过滤选择器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(select) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素
C,可见性过滤选择器
:hidden 匹配所有不可见元素，
或者type为hidden的元素
:visible 匹配所有的可见元素
D,属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
E,子元素过滤选择器
:nth-child(index/even/odd)
注：下标从1开始
F,表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
(4)表单选择器
:input
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file

:hidden

2.dom操作 dom
(1)读取或者修改节点的html内容,文本内容,属性值,
value值。
1)html()
2)text()
3)attr()
4)val()
(2)创建节点
$(html)
(3)添加节点
1)append():作为最后一个孩子添加
2)prepend():作为第一个孩子添加
3)before():作为上一个兄弟添加
4)after():作为下一个兄弟添加
(4)删除节点
1)remove()
2)empty()
(5)将html与js代码分离
$(fn);
注: fn是一个函数(也可以是匿名函数)，当整个页
面加载完毕，会执行该函数。
(6)clone
clone();
clone(true); 连同事件处理函数一块复制(即复制行为)
(7)属性操作
attr();读取或者修改属性
removeAttr();删除属性
(8)样式
1)attr():设置style,class属性值
2)addClass():添加样式。参数必须是一个class选择器，可以
同时添加多个样式。
removeClass():删除样式。如果没有添加任何参数，
表示删除所有的class选择器。
3)toggleClass():切换样式。
4)hasClass():判断节点是否有该样式，有则返回true,
否则返回false。
5)css():直接添加样式。
css({'font-size':'60px','color':'red'});
(9)遍历
1)children()/children(select):查找子节点。
2)parent():父节点。
3)prev()/prev(select):上一个兄弟
4)next()/next(select):下一个兄弟
5)siblings()/siblings(select):其它兄弟

6)find(select):查找后代

例子1：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	function bigger(){
		//获取段落的原始字号(16px)
		var size=$("p").css("font-size");
		//去掉字号单位，便于增加字号
		size=size.replace("px", "");
		//将字号将+1再设置给段落
		$("p").css("font-size",++size+"px");
	}
</script>
</head>
<body>
	<input type="button" value="+" οnclick="bigger();"/>
	<p>1.引入jquery.js</p>
	<p>2.使用选择器选中节点</p>
	<p>3.调用它的API操作节点</p>
</body>
</html>

例子2：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	function print1(){
		//使用选择器获取的是jQuery对象
		var $ps=$("p");
		console.log($ps);
		for(var i=0;i<$ps.length;i++){
			//从jQuery对象中获取的值是dom
			var p=$ps[i];
			console.log(p.innerHTML);
		}
	}
	//调用时传入了this，它指代点击的那个图片，这是一个dom对象
	function chg(img){
		console.log($(img).width());
		console.log($(img).height());
		if($(img).width()==218){
			$(img).width(250).height(250);
		}else{
			$(img).width(218);
		}
	} 
</script>
</head>
<body>
	<input type="button" value="打印" οnclick="print1();">
	<p>1.jQuery对象才能调用jQuery方法</p>
	<p>2.dom对象才能调用dom方法/</p>
	<p>3.jQuery对象本质上是dom数组</p>
	
	<div>
		<img alt="" src="../images/1.jpg" οnclick="chg(this);">
	</div>
</body>
</html>

例子3：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	window.οnlοad=function(){
		//1.基本选择器:和css选择器一样
		//2.层次选择器
			//2.1选择子孙、儿子:和css派生选择器一样
			//2.2选择弟弟
			console.log($("#gz+"))
		//3.过滤选择器（*）
		//3.1基本过滤选择器
		console.log($("li:first"));
		console.log($("li:even"));
		console.log($("li:eq(1)"));
		console.log($("li:not(#gz)"));
		//3.2内容过滤选择器
		console.log($("li:contains('海')"));
		//3.3可见性过滤选择器
		console.log($("li:hidden"));
		//3.4属性过滤选择器
		console.log($("li[style]"));
		//3.5状态过滤选择器
		console.log($("input:enabled"));
		//4.表单选择器
		console.log($("input:radio"));
	}
</script>
</head>
<body>
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li id="gz">广州</li>
		<li>天津</li>
		<li>深圳</li>
		<li style="display:none;">杭州</li>
	</ul>
	
	<!-- readonly:只读，但数据有效依然可以提交给服务器
		 disabled:不可用，数据无效，不能提交给服务器 -->
	<p>
		<input type="text" disabled="disabled"/>
		<input type="password">
	</p>
	<p>
		<input type="radio" name="sex">男
		<input type="radio" name="sex">女
	</p>
</body>
</html>

例子4：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.big{
		font-size:50px;
	}
	.important{
		color:red;
	}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	//页面加载之后调用这个函数，其作用等价于window.oncload=function()
	$(function(){
		//1.读写节点的操作
		//1.1读写内容（双标签有内容）
		//(1)html()==innerHTML
		console.log($("p:eq(0)").html("jQuery对<u>DOM操作</u>提供了支持"));
		//(2)text()==innerText
		console.log($("p:eq(0)").text());
		//1.2读写值（表单控件有值）
		//val()==value
		console.log($("input:button:first").val());
		$("input:button:first").val("BBB");
		//1.3读写属性
		//attr()==get/setAttribute()
		console.log($("img:first").attr("src"));
		$("img:first").attr("src","../images/2.jpg");
		//2.增删节点
		//2.1创建节点
		var $li1=$("<li>杭州</li>");
		var $li2=$("<li>苏州</li>");
		console.log($li1);
		//2.2增加节点
		$("ul").prepend($li1);
		$("#gz").after($li2);
		//2.3删除节点
		$("li:last").remove();
		//3.遍历节点：查找某节点的亲戚，有些时候我们调用别人的方法得到一个节点
		//对其进行一些操作，然后又要对此节点的亲戚进行操作，此时无法写选择器，只能调用这样的方法
		var $gz=$("#gz");
		//要获取广州的亲戚做进一步处理
		console.log($gz.parent());
		//获取广州的上一个兄弟
		console.log($gz.prev());
		//获取广州的所有兄弟
		console.log($gz.siblings());
		//假设我调用了别人的方法得到了ul
		var $ul=$("ul");
		//要获取列表的孩子做进一步处理
		console.log($ul.find("li:gt(2)"));
		//4.样式操作
		//增加样式
		$("p:first").addClass("important");
		//删除样式
		$("p:first").removeClass("important");
		//判断元素是否包含某样式
		console.log($("p:first").hasClass("big"));
	});
	//切换样式
	function bigger(){
		$("p:first").toggleClass("big");
	}
</script>
</head>
<body>
	<p>jQuery对<b>DOM操作</b>提供了支持</p>
	<p>
		<input type="button" value="AAA">
	</p>
	<p>
		<img src="../images/1.jpg">
	</p>
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li id="gz">广州</li>
		<li>深圳</li>
		<li>天津</li>
	</ul>
	<p>
		<input type="button" value="大" οnclick="bigger()">
	</p>
</body>
</html>