文章 专栏 网址导航
登录
转载

Wab开发————jQuery

发布于 2021-03-17 阅读 335
  • 前端
  • JavaScript
  • HTML
转载

jQuery

  • jQuery简介
  • jQuery引入
  • jQuery对象和DOM对象
    • jQuery对象与DOM对象的相互转化
  • 选择器
    • 基本选择器
    • 附加：Jquery对象的遍历方式
    • 层次选择器
    • 基本过滤选择器
    • 属性选择器
    • 表单选择器
    • 表单对象属性
    • this

jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery引入

<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>

jQuery对象和DOM对象

通过jquery的方式获取到的对象就叫jquery对象，比如 $("#d1") 通过js的方式获取到的对象叫DOM对象,比如： var obj = document.getElementById(“d1”);

为什么要划分不同的对象呢? jquery只能取调用jquery的属性以及方法 dom对象只能取调用js的属性以及方法

jQuery对象与DOM对象的相互转化

一 dom对象转化jquery对象 var obj = document.getElementById(“d1”); $(obj) jquery对象 二、jQuery对象转化为DOM对象 有以下两种方法： 方法一：利用数组下标的方式读取jQuery中的DOM对象

HTML代码：
1 <div>元素一</div>
2 <div>元素二</div>
3 <div>元素三</div>
javascript代码:
1 var $div =$('div');  //jQuery对象
2 var div = $div[0];  //转化为DOM对象
3 div.style.color = 'red'  //操作DOM对象的属性

jQuery对象是一个数组结构，可以通过数组下标索引找到对应的div元素，通过返回的div对象调用它的style属性修改div元素的颜色。 方法二：通过jQuery自带的get()方法 jQuery对象自身提供一个.get()方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供了一个元素的索引

1 var $div = $('div')  //jQuery对象
2 var div = $div.get(0);  //通过get方法，转化为DOM对象
3 div.style.color = 'red';  //操作DOM对象的属性

其实，jQuery源码中，get()方法就是利用数组下标的方式处理的，只不过jQuery把它包装程get方法更便于开发者使用。 html()–>等价于js中innerHTML text()–>等价于js中的innerText val()–>等价于js中的value

选择器

基本选择器

1.id选择器
<div id="d1"></div>   $("#d1")
2.类选择器
<div class="c1">   $(".c1")  
</div>
3.标签选择器  $("div")
<div>     
</div>
4.混合选择器
多个选择器组合，选择器与选择器之前以逗号隔开

附加：Jquery对象的遍历方式

$obj.each(function(i,dom){
   //i表示数组的下标    dom表示数组中的值-->是js对象
   //$obj 要遍历的数组对象
});
或者
$.each(obj,function(i,dom){
//obj：要遍历的数组对象
});

层次选择器

1.后代选择器 selector1 selector2  匹配给定祖先元素下制定的后代标签
代码示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$arr = $("form input");//
				//输出$arr中name属性的值
				$arr.each(function(i,dom){
					console.log(dom.name);
				});
			});
		</script>
	</head>
	<body>
		<form>
		  <label>Name:</label>
		  <input name="name" />
		  <fieldset>
		      <label>Newsletter:</label>
		      <input name="newsletter" />
		 </fieldset>
		</form>
		<input name="none" />
	</body>
</html>

2.parent > child 在给定的父元素下匹配所有的子元素 3.prev + next 匹配所有紧接在 prev 元素后的 next 元素 4.prev ~ siblings 匹配prev下边指定的sibling所有兄弟

基本过滤选择器

:first 匹配第一个标签对象 :last 匹配最后一个标签 :not(selector) 除了该标签剩下所有的标签 :even 匹配下标为偶数的标签对象 :odd 匹配下标为奇数的标签对象 :eq(index) 匹配的下标为index的标签对象 :gt(index) 匹配的大于下标为index的标签对象 :lt(index) 匹配的小于下标为index的标签对象

:fist与:last 案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//点击按钮获取第一个列表项与最后一个列表项标签内容
				$("#btn1").click(function(){
					$firstObj = $("li:first");
					console.log($firstObj.html());
					$lastObj = $("li:last");
					console.log($lastObj.html());
					
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>第一个列表项</li>
			<li>第二个列表项</li>
			<li id="d1">第三个列表项</li>
			<li>第四个列表项</li>
		</ul>
		<input type="button" value="first|last" id="btn1"/>
	</body>
</html>


:not(selector)的代码案例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//获取第1,2,4标签内容
				$("#btn2").click(function(){
					$arr = $("li:not(#d1)");
					$arr.each(function(i,dom){
						console.log($(dom).html());
					});
					
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>第一个列表项</li>
			<li>第二个列表项</li>
			<li id="d1">第三个列表项</li>
			<li>第四个列表项</li>
		</ul>
		<input type="button" value="not" id="btn2"/>
	</body>
</html>



:even | :odd 代码示例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//获取第1,3标签内容
				$("#btn3").click(function(){
					$arr = $("li:even");
					$arr.each(function(i,dom){
						console.log($(dom).html());
					});
					console.log("-----------------------")
					//获取2,4标签内容
					$arr1 = $("li:odd");
					$arr1.each(function(i,dom){
						console.log($(dom).html());
					});
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>第一个列表项</li>
			<li>第二个列表项</li>
			<li id="d1">第三个列表项</li>
			<li>第四个列表项</li>
		</ul>
		<input type="button" value="even|odd" id="btn3"/>
	</body>
</html>


:eq的代码示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//获取第二个列表项
				$("#btn4").click(function(){
					$obj = $("li:eq(1)");
					console.log($obj.html());
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>第一个列表项</li>
			<li>第二个列表项</li>
			<li id="d1">第三个列表项</li>
			<li>第四个列表项</li>
		</ul>
		<input type="button" value="eq" id="btn4"/>
	</body>
</html>

属性选择器

[attribute] 匹配具有该属性的标签对象 [attribute=value] 匹配具有该属性且值为指定的值的标签对象 [attribute*=value] 匹配标签中带有指定属性，且属性的值中包含xxx的标签对象

代码示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$arr = $("div[id]");
				$arr.each(function(i,dom){
					console.log($(dom).html())
				});
				//
				console.log("---------------");
				$arr1 = $("input[name='newsletter']");
				$arr1.each(function(i,dom){
					console.log($(dom).val())
				});
				//获取name属性中包含cc的标签对象的value值。
				$arr2 = $("[name*='cc']");
				$arr2.each(function(i,dom){
					console.log($(dom).val());
				});
			})
		</script>
	</head>
	<body>
		<div>
		  <p>Hello!</p>
		</div>
		<div id="test2">2</div>
		<p id="d2">3</p>
		<input type="checkbox" name="newsletter" value="Hot Fuzz" />
		<input type="checkbox" name="newsletter" value="Cold Fusion" />
		<input type="checkbox" name="accept" value="Evil Plans" />
	</body>
</html>

表单选择器

:input 匹配所有 input, textarea, select 和 button 元素 :text 匹配文本框 :password 匹配密码框 :radio 匹配单选框 :checkbox 匹配多选框 :submit 匹配提交按钮 :image 匹配type为image的标签 :reset 匹配重置按钮 :button 匹配按钮 :file 匹配上传文件域 :hidden 匹配隐藏域

表单对象属性

:enabled 匹配可用标签 :disabled 匹配不可用(禁用)标签 :checked 匹配选中的标签 单选的复选框 :selected 匹配选中的标签 下拉选列表

this

this:当前标签对象–>js对象 $(this):当前标签对象–>jquery对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//点击按钮获取按钮的value值
				$("#btn").click(function(){
					console.log($(this).val());
				})
			});
		</script>
	</head>
	<body>
		<input type="button" value="点击一下" id="btn">
	</body>
</html>
本文章不代表SDK.CN立场，如有违规或者侵权，请联系我们及时删除。

评论区

admin
14粉丝

打江山易，守江山难，负重前行，持续创新。

0

0

0

举报

京ICP备2020037553号-1 北京斯蒂克科技有限公司@版权所有