第三章 JQuery

最新推荐文章于 2019-08-22 01:22:04 发布
最新推荐文章于 2019-08-22 01:22:04 发布
阅读量360 收藏 1
点赞数
分类专栏： JavaScriptJQuery 文章标签： JQuery 选择器 工厂函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mythology_px/article/details/82356119
版权

jQuery语法结构

                 $(selector).action() ;

工厂函数 $()：将DOM对象转化为jQuery对象;$等同于jQuery

选择器 selector：获取需要操作的DOM元素

方法 action()：jQuery中提供的方法，包括绑定事件处理的方法

 

方法

           css(“属性”,”属性值”) ：为元素设置CSS样式的值

           addClass(“类样式名”)  ：为元素添加类样式

           html(“HTML代码”)  ：为元素设置innerHTML的值

           $(document).ready()：类似window.onload

           size( ) :  长度

           next( ):  获取当前标签的下一个标签

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>页面加载ready</title>
	</head>
	<!--在当前页面引入jquery库文件-->
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript">
		//JavaScript页面加载
		window.onload = function() {
			alert("页面加载-JavaScript");
		}

		//JQuery页面加载
		$(document).ready(
			//语句是作为参数被ready方法执行,故不加;
			alert("页面加载-方式1")
		);
		
		// JQuery页面加载简写	
		$(function(){
			//直接使用工厂函数，函数内部是一个无名函数
			alert("页面加载-方式2");
		});
		
	</script>

	<body>

	</body>

</html>

 

类CSS选择器

           基本选择器

                    标签选择器

                    类选择器

                    ID选择器

                    并集选择器

                    交集选择器

                    全局选择器

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>ID选择器类选择器标签选择器</title>
	</head>
	<!--在当前页面引入jquery库文件-->
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript">
		/*
		 *html()方法类似====>innerHTML
		 *css()方法类似  ====>css样式的改变
		 *addClass类似 =====>给标签添加一个类样式
		 *size()方法     ======>长度
		 *next()方法 ========>获取当前标签的下一个标签
		 */

		//网页加载的简化写法
		$(function() {
			/*************ID选择器*************/
			alert($("#p1").html());
			$("#p1").html("李太白");
			/*************class选择器*************/
			alert($(".one").html());
			/*************标签选择器*************/
			alert($("p").size())
			/************css()方法******************/
			$(".one").css("font-size", "10px");
			$(".one").css("color", "green");
			/************addClass()方法******************/
			$(".one").addClass("two");
			/*******************next方法********************/
			$(".one").css("font-size", "10px").next().css("color", "green")
			alert($(".one").next().html());
		});
	</script>
	<style type="text/css">
		.one {
			font-size: 50px;
		}
		
		.two {
			font-size: 5px;
			color: yellow;
		}
	</style>

	<body>
		<p id="p1">李白</p>
		<p class="one">杜甫</p>
		<p>苏东坡</p>
		<p>纳兰性德</p>
		<p>李清照</p>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>并集选择器交集选择器全局选择器</title>
	</head>
	<!--在当前页面引入jquery库文件-->
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript">
		$(function() {
			/**************并集选择器****************/
			//语法使用,进行分割
			$("p,div,.one").css("color","red");
			/**************交集选择器****************/
			//语法标签.class 或者标签#id
			$("span.one").css("color","yellow");
			/***************全局选择器********************/
			$("*").css("font-size","50px");
		})
	</script>
	<style type="text/css">
		.one {
			font-size: 50px;
		}
		
		.two {
			font-size: 5px;
			color: yellow;
		}
	</style>

	<body>
		<p id="p1">李白</p>
		<span class="one">杜甫</span>
		<p>李清照</p>
		<p>纳兰性德</p>
		<p>曹操</p>
		<div>苏东坡</div>
		<div>曹植</div>
	</body>

</html>

           层次选择器

                      后代选择器

                      子选择器

                      相邻元素选择器

                      同辈元素选择器

<!DOCTYPE html>
<html>
	<script type="text/javascript" src="js/jquery-1.9.1.js">
	</script>

	<head>
		<meta charset="utf-8" />
		<title>层次选择器</title>
		<style type="text/css">
			.abc {
				background-color: red;
				width: 200px;
				height: 200px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				/******************层次选择器*******************/
				//层次选择器1,取得所有后代
				var d4 = $('#d4 div');
				alert(d4.length);

				//层次选择器2,只取儿子辈孙子代不算
				var d5 = $('#d4>div');
				alert(d5.length);

				//层次选择器3,只取隔壁,而且下方的
				var d6 = $('#d5+div');
				alert(d6.html());

				//同辈选择器，获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
				alert($("#d1~span").length);

			});
		</script>

	</head>

	<body>
		<input type="text" id="t1" value="在这里输入值" />
		<br />
		<div id="d1" class="abc">
			<div id="d2" class="abc">
			</div>
		</div>
		<div id="d3">

		</div>
		<span>
		span
	</span>

		<hr/>
		<div id="d4">
			<div>无名div</div>
			<div id="d5">
				<div id="d8"></div>
				<span>
				span
			</span>
			</div>
			<div id="d6">6号div</div>
			<div id="d7"></div>
		</div>
		<span>
		span
	</span>
		<hr/>
	</body>

</html>

           属性选择器：属性选择器通过HTML元素的属性来选择元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>属性选择器</title>
		<!--css样式 -->
		<style type="text/css">
			#box {
				background-color: #FFF;
				border: 2px solid #000;
				padding: 5px;
			}
		</style>

		<!--javaScript导包 -->
		<script src="js/jquery-1.9.1.js" type="text/javascript"></script>

		<!--Jquery代码 -->
		<script type="text/javascript">
			$(function() {
				//$("h2[title]").css("background-color","#ff0099");
				//改变含有title属性的<h2>元素的背景颜色

				//$("[class='odds']").css("background-color","#ff0099");
				//改变class属性的值为odds的元素的背景颜色

				//$("[id!=box]").css("background-color","#09F");
				//改变id属性的值不为box的元素的背景颜色

				//$("[title^=h]").css("background-color","#09F");
				//改变title属性的值中以h开头的元素的背景颜色

				//$("[title$=jp]").css("background-color","#09F");
				//改变title属性的值中以jp结尾的元素的背景颜色

				//$("[title*=s]").css("background-color","#09F");
				//改变title属性的值中含有s的元素的背景颜色

				$("li[class][title*=y]").css("background-color","#09F");
				//改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色

			});
		</script>
	</head>

	<body>
		<div id="box">
			<h2 class="odds" title="cartoonlist">动画列表</h2>
			<ul>
				<li class="odds" title="kn_jp">名侦探柯南</li>
				<li class="evens" title="hy_jp">火影忍者</li>
				<li class="odds" title="ss_jp">死神</li>
				<li class="evens" title="yj_jp">妖精的尾巴</li>
				<li class="odds" title="yh_jp">银魂</li>
				<li class="evens" title="hm_da">黑猫警长</li>
				<li class="odds" title="xl_ds">仙履奇缘</li>
			</ul>
		</div>
	</body>

</html>

 

过滤选择器

           基本过滤选择器：基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素；也可以根据索引的值选取元素；还支持一些特殊的选择方式

           可见性过滤选择器：通过元素显示状态来选取元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>过滤选择器</title>
	</head>
	<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			//$("li:first").css("background-color","#09F");
			//改变第1个<li>元素的背景颜色

			//$("li:last").css("background-color","#09F");
			//改变最后一个<li>元素的背景颜色

			//$("li:not(.three)").css("background-color","#09F");
			//改变class不为three的<li>元素的背景颜色

			//$("li:even").css("background-color","#09F");
			//改变索引值为偶数的<li>元素的背景颜色

			//$("li:odd").css("background-color","green");
			//改变索引值为奇数的<li>元素的背景颜色

			//$("li:eq(1)").css("background-color","#09F");
			//改变索引值等于1的<li>元素的背景颜色

			//$("li:gt(1)").css("background-color","#09F");
			//改变索引值大于1的<li>元素的背景颜色

			//$("li:lt(1)").css("background-color","#09F");
			//改变索引值小于1的<li>元素的背景颜色

			//$(":header").css("background-color","#09F");
			//改变所有标题元素，例如<h1>,<h2>,<h3>……这些元素的背景颜色

			//$(":focus").css("border-bottom-color", "red");
			//改变当前获取焦点的元素的背景颜色
			
			//可见性选择过滤器
			//alert($(":visible").length);
			//alert($(":hidden").length);
			
			//alert($("input:hidden").val());

		});
	</script>

	<body>

		<h2>网络小说</h2>
		<ul>
			<li>王妃不好当</li>
			<li>致命交易</li>
			<li class="three">迦兰寺</li>
			<li>逆天之宠</li>
			<li>交错时光的爱恋</li>
			<li>张震鬼故事</li>
			<li>第一次亲密接触</li>
		</ul>

		<ul>

			<li>致命交易</li>
			<li class="three">迦兰寺</li>
			<li>逆天之宠</li>
			<li>交错时光的爱恋</li>
			<li>张震鬼故事</li>
			<li>第一次亲密接触</li>
		</ul>

		<input type="hidden" id="aa" value="我是藏起来活到最后的那个" />
	</body>

</html>

 

表单选择器:根据不同类型的表单元素进行选取

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>表单验证</title>
	</head>
	<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			//点击提交按钮，如果为空则输入框的边框为红色
			$(":submit").click(
				function() {
					//ps 演示获取这几个的方式

					//获取用户名
					var $username = $(":input[name='username']");
					//获取密码
					var $password = $(":password[name='pwd']");
					//获取确认密码
					var $repwd = $(":password[name='repwd']");
					//获取昵称
					var $nickname = $("[name='nickname']");
					//获取已选单选按钮
					var $radio = $(":radio:checked");
					//获取已选复选框
					var $checkbox = $(":checkbox:checked");
					//获取已选下拉框
					var $selected = $(":selected");

					redSet($username);
					redSet($password);
					redSet($repwd);
					redSet($nickname);
					redSet2($radio);
					redSet3($checkbox);
					redSet4($selected);

					return false;
				}

			);

			//value ===>val()
			//innserHTML ===>html()
			function redSet(obj) {
				if(obj.val() == "") {
					obj.css("border", "1px solid red");
				} else {
					obj.css("border", "1px solid green");
				}
			}

			//parent()获取父元素
			function redSet2(obj) {
				if(obj.length == 0) {
					$(":radio").parent().css("border", "1px solid red");
				} else {
					$(":radio").parent().css("border", "1px solid green");
				}
			}

			function redSet3(obj) {
				if(obj.length == 0) {
					$(":checkbox").parent().css("border", "1px solid red");
				} else {
					$(":checkbox").parent().css("border", "1px solid green");
				}
			}

			function redSet4(obj) {
				if(obj.val() == "") {
					$("select").css("border", "1px solid red");
				} else {
					$("select").css("border", "1px solid green");
				}
			}
		});
	</script>
	</head>

	<body>
		<fieldset>
			<legend>注册表单</legend>
			<form onsubmit="return false;">
				<input type="hidden" name="pid" value="1" />
				<p>账号：<input type="text" name="username" /></p>
				<p>密码：<input type="password" name="pwd" /></p>
				<p>确认密码：<input type="password" name="repwd" /></p>
				<p>昵称：<input type="text" name="nickname" /></p>
				<p>性别：
					<input type="radio" name="sex" value="1">男
					<input type="radio" name="sex" value="0">女
				</p>
				<p>爱好：
					<input type="checkbox" name="hobby" value="篮球" />篮球
					<input type="checkbox" name="hobby" value="足球" />足球
					<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
					<input type="checkbox" name="hobby" value="其他" />其他
				</p>
				<p>省份：
					<select>
						<option value="">--省份--</option>
						<option value="北京">北京</option>
						<option value="云南">云南</option>
						<option value="云南">云南</option>
						<option value="其他">其他</option>
					</select>
				</p>
				<input type="submit" value="提交表单" />
			</form>
		</fieldset>
	</body>

</html>

 

内容过滤器:根据内容来选取元素

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内容选择器</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
            //$("td:contains('运动鞋')").css("background-color","blue");  
            //包含"运动鞋"的表格行背景色为蓝色
            //$("td:empty").css("background-color","red"); 
            //没有内容的单元格背景色为红色
            //$("td:has('a')").css("background-color","green");
            //包含连接的单元格背景色为绿色
            //$("td:parent").css("background-color","gray");
            //含有子节点或文本的表格背景色为灰色
        });
</script>
</head>
<body>
<table>
<thead>
<tr style="background-color: #aaaaaa;">
<th>序号</th>
<th>订单号</th>
<th>商品名称</th>
<th>价格(元)</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>10035900</td>
<td><a href="#">Nike透气减震运动鞋</a></td>
<td>231.00</td>
</tr>
<tr>
<td>2</td>
<td>10036114</td>
<td>天美太阳伞</td>
<td>51.00</td>
</tr>
<tr>
<td>3</td>
<td>10035110</td>
<td><a href="#">万圣节儿童蜘蛛侠装</a></td>
<td>31.00</td>
</tr>
<tr>
<td>4</td>
<td>10035120</td>
<td>匹克篮球运动鞋</td>
<td>231.00</td>
</tr>
<tr>
<td>5</td>
<td>10032900</td>
<td>jQuery权威指南</td>
<td></td>
</tr>
</table>
</body>
</html>

 

特殊符号的转义

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>特殊符号的转义</title>
		<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
		<script type="text/javascript">
			$(function() {
				//使用\\将特殊符号进行转义
				$("#a\\#b").html("见微知著");
				$("#s\\[2\\]").text("墨溅书香，妙笔生花！");
			});
		</script>
	</head>

	<body>
		<h1 id="a#b">墨渐生微</h1>
		<h1 id="s[2]">欢迎关注！！</h1>
	</body>

</html>

 

墨渐生微
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery第一章入门
LW0512的博客
10-04 197
总结 1:什么是jQuery? 它通过封装原生的 JavaScript 函数得到一整套定义好的方法 2：jQuery的作用？ 1.像 CSS 那样访问和操作 DOM 2.修改 CSS 控制页面外观 3.简化 JavaScript 代码操作 4.事件处理更加容易 5.各种动画效果使用方便 6.让 Ajax 技术更加完美 7.基于 jQuery 大量插件 8.自行扩展功能插件 3：jQuery的优点？ 以更少的代码、实现更多的功能 4：jQuery的引入方式？ 1：本地引入（外链接） <scrip
第三章：jQuery事件
最新发布
NoKris的博客
08-25 86
事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件。这些就不在一一讲述，事件有很多，我们用的时候搜一下就行，一个一个记住不太现实。//调整窗口大小时，完成页面特效。​ hover()方法相当于mouseover与mouseout事件的组合。// type:事件类型；​ toggle()方法用于模拟鼠标连续click事件。
jQuery特殊属性操作
weixin_45307185的博客
08-22 90
val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $("#name").val(“张三”); //获取值 $("#name").val(); html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $(“div”).html(“<span>这是一段内容</span&gt...
jquery 获取值及赋值
Aring专注网络安全
12-03 991
jQuery 取值、赋值的基本方法 /*获得TEXT.AREATEXT的值*/      var textval = $("#text_id").attr("value"); //或者      var textval = $("#text_id").val(); /*获取单选按钮的值*/      var valradio = $("input[@type=ra
jQuery笔记之属性选择器
ArryLuo123的博客
02-22 658
//验证以上理论 $(function() { //改变含有title属性的元素的背景颜色，语法(选取包含给定属性的元素)实例$(" [href]" )选取含有href属性的元素 $("h2[title]").css("background-color", "red"); /** * [attribute=value]
jQuery第三章代码
01-01
jquery代码可以很好的让你了解jquery的优点
JS/JQuery-第3章上机练习.zip
04-20
【原创作者田超凡，未经许可请勿转发，侵权仿冒必究】 JS/JQuery-第1章上机练习.zip
锋利的jQuery第2版源码
11-06
3. **事件处理**：jQuery提供了丰富的事件处理函数，如`.click()`, `.mouseover()`, `.keydown()`等。源码中会展示如何绑定和触发这些事件，以及如何使用`.on()`和`.off()`来管理事件监听。 4. **动画效果**：...
JS/JQuery-第5章上机练习.zip
04-20
在"JS/JQuery-第5章上机练习"中，我们可以推测这章主要围绕以下几个主题展开： 1. **DOM遍历**：学习如何使用JQuery遍历DOM树，获取或修改元素及其子元素的属性。 2. **事件处理**：深入理解JQuery中的事件模型，...
jQuery基础教程（第四版）
04-28
《jQuery基础教程（第四版）》是一本针对初学者和有一定JavaScript基础的开发者设计的教程，旨在深入浅出地介绍jQuery这一广泛使用的JavaScript库。jQuery以其简洁、高效的API，极大地简化了网页动态效果的实现，...
北大青鸟使用jQuery快速高效制作网页交互特效 第九章上机+课后+上课实例代码
05-29
在本课程中，“北大青鸟使用jQuery快速高效制作网页交互特效 第九章上机+课后+上课实例代码”着重讲解了如何利用jQuery这一强大的JavaScript库来提升网页的交互性和用户体验。jQuery是一个轻量级、高性能的库，它极...
JQuery 第三章 初始JQuery 上机+课后
qq_36074043的博客
04-25 4849
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'sj7.jsp' starting
第三章 上机练习1
qq_36074058的博客
10-12 8581
网易邮箱登录 免费邮 企业邮 VIP邮箱 帮助 163/126/yeah三大免费邮箱均默认开放 全面支持iPhone/iPad及Android等系统 客户端、手机与网页，实现发送、阅读邮件立即同步普通登录手机号登录   普通登录 用户名 @163.com
JQuery第一章js 上机+课后
热门推荐
qq_36074043的博客
04-25 1万+
=============上机1 包含字母 sj1.html --> document.write("在以下字符中："); var count=0; var fruit=["America","Greece","Britain","Canxda","China","Egypt"]; for(var i in fruit){ d
jQuery第三章
weixin_34254823的博客
01-27 179
一、jQuery中的DOM操作 一般来说，DOM操作分为3个方面，即DOM Core核心、HTML-DOM和CSS-DOM 1.DOM Core JavaScript中的getElementById()、getElemntByTagName()、getAttribute()和setAttribute()等方法，都是DOM Core的核心，例如： （1）使...
笔记4，jQuery选择器
小麦先生
02-18 758
1，jQuery选择器     jQuery选择器类似于CSS选择器，用来选取网页中的元素     $("h3").css("background","#09F");         获取并设置网页中所有元素的背景 “         h3”为选择器语法，必须放在$()中         $(“h3”)返回jQuery对象         .css()是为jQuery对象设置样式的方法
第3章 知识点
华少的博客
07-17 147
使用getElement系列方法访问指定节点 getElementById()、getElementsByName()、getElementsByTagName() 根据层次关系访问节点 parentNode 返回节点的父节点 childNodes 返回子节点集合，childNodes[i] first...
jQuery第三章课后作业
suixinCaesar的博客
07-19 6344
3.实现有一个图片和五个数字链接，单击不同的数字链接显示不同的图片。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片轮换&lt;/title&gt; &lt;link rel="stylesh

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值