jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

Wyibo1124

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量119

点赞数

分类专栏：博客文章标签： jquery

本文链接：https://blog.csdn.net/m0_55857594/article/details/115438525

版权

博客专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery

概述

John Resig 在2006年1月发布的一款跨主流浏览器的 JavaScript 库，简化 JavaScript 对 HTML 操作

【API文档】https://jquery.cuishifeng.cn/index.html

为什么要使用 jQuery

写少代码,做多事情【write less do more】
免费，开源且轻量级的js库，容量很小
注意：项目中，提倡引用min版的js库
兼容市面上主流浏览器，例如 IE，Firefox，Chrome
注意：jQuery不是将所有JS全部封装，只是有选择的封装
能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
文档手册很全，很详细
成熟的插件可供选择
提倡对主要的html标签提供一个id属性，但不是必须的
出错后，有一定的提示信息
不用再在html里面通过 script 标签插入一大堆js来调用命令了

使用

1、引入库文件

<!--【推荐】引入本地资源，没网也能用-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<!--微软jquery压缩版引用地址-->
<script
src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>

<!--【卡】官网jquery压缩版引用地址-->    
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

<!--微软jquery压缩版引用地址-->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

<!--【卡】官网jquery压缩版引用地址-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2、查阅 API 文档

https://jquery.cuishifeng.cn/

js 对象和 jQuery 对象相互转换

js 对象转成 jQuery 对象【重点】

语法：$(js对象)---->jQuery对象
例如：$(divElement)---->$div
例如：$(this)---->$this
注意：jQuery对象将js对象做了封装，js对象两边无引号

jQuery 对象转成 js 对象

语法1：jQuery对象[下标，从0开始]
语法2：jQuery对象.get(下标，从0开始)
例如：$div[0]---->divElement
注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然

js 对象和 jQuery 对象的区别

（1）js对象的三种基本定位方式
    （A）通过ID属性：document.getElementById()
    （B）通过NAME属性：document.getElementsByName()
    （C）通过标签名：document.getElementsByTagName()
    
（2）jQuery对象的三种基本定位方式
    （A）通过ID属性：$("#id属性值")
    （B）通过标签名：$("标签名")
    （C）通过CLASS属性：$(".样式名")
    
（3）js对象出错的显示
     没有合理的提示信息
    例如：alert(document.getElementById("usernameIDD").value)
    
（4）jQuery对象出错的显示
     有合理的提示信息，例如：undefined
    例如：alert($("#usernameIDD").val())

jQuery 中常用 API

通过方法，能操作web页面（HTML/JSP）中的任何标签

（1）val()：获取标签的value属性值，前提是该标签有value属性
（2）html()：获取标签之间的内容，不能应用于xml文件
（3）text()：获取标签之间的内容，可以用运于html/jsp和xml文件【建议】
（4）css()：获取或添加加key-value形成的css样式
（5）length：获取jQuery对象/数组中元素的个数

注意：在写 jQuery 代码时，不光可以使用 jQuery 的API，还能使用传统JS的API

jQuery 选择器

通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签

（1）基本选择器
（2）层级选择器
（3）增强基本选择器
（4）内容选择器
（5）可见性选择器
（6）属性选择器
（7）子元素选择器
（8）表单选择器
（9）表单对象属性选择器

案例代码一：基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
		<div id="id">嘻嘻</div>
		<div class="class">哈哈</div>
		<div>呵呵</div>
	</body>
	<script>
		// id选择器获取元素
		var idElement = $("#id");
		
		// class选择器获取元素
		var classElement = $(".class");
		
		// 标签选择器获取元素
		var divElement = $("div");
		
		console.log(idElement.text());
		console.log(classElement.text());
		console.log(divElement.length);
	</script>
</html>

案例代码二：层级选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>增强基本选择器</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
		<div id="div1">
			<div id="div2">嘻嘻
				<div class="divClass1">哈哈</div>
			</div>
			
			<div class="divClass2">呵呵</div>
			<div id="div3">呀呀</div>
		</div>
		
	</body>
	<script>
		// 获取所有div的个数
		console.log($("div").length);
		
		// 获取呵呵所在的div的值
		console.log($("#div1 .divClass2").html());
		
		// 获取哈哈所在的div的值
		console.log($("#div1 #div2 .divClass1").text());
		
		// 在给定的父元素下匹配所有的子元素
		console.log($("#div1 > div").text());
		
		// 匹配所有紧接在 div2 元素后的 div 元素
		console.log($("#div2 + div").text());
		
		// 匹配 div2 元素之后的所有 div 元素
		console.log($("#div2 ~ div").text());
		
		// 指定任意多个选择器，并将匹配到的元素合并到一个结果内
		console.log($("#div1, .divClass2, #div2").length)
	</script>
</html>

案例代码三：增强基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>增强基本选择器</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
		<ul>
		    <li>list item 1</li>
		    <li>list item 2</li>
		    <li>list item 3</li>
		    <li>list item 4</li>
		    <li>list item 5</li>
		</ul>
		
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h6>三级标题</h6>
		
	</body>
	<script>
		// 获取第一个li标签
		console.log($("li:first").html());
		
		// 获取第二个li标签
		console.log($("li:last").text());
		
		// 匹配所有索引值为奇数的元素，从 0 开始计数
		console.log($("li:odd").length);
		
		// 匹配所有索引值为偶数的元素，从 0 开始计数
		console.log($("li:even").length);
		
		// 【重点】匹配一个给定索引值的元素
		console.log($("li:eq(1)").html());
		
		// 匹配所有大于给定索引值的元素
		console.log($("li:gt(1)").length);
		
		// 匹配如 h1, h2, h3之类的标题元素
		$(":header").css({"color":"red"});
	</script>
</html>

案例代码四：内容选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内容选择器</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
		<div>青花瓷</div>
		<div>告白气球</div>
		<div>千里之外</div>
		<div>菊花台</div>
		
		<p></p>
		
		<div><p>真香</p></div>
		
		<table>
		  <tr><td>Value 1</td><td></td></tr>
		  <tr><td>Value 2</td><td></td></tr>
		</table>
		
	</body>
	<script>
		// 匹配包含给定文本的元素
		console.log($("div:contains('青花瓷')").text());
		
		// 匹配所有不包含子元素或者文本的空元素
		console.log($("p:empty").length);
		
		// 匹配含有选择器所匹配的元素的元素
		$("div:has(p)").addClass("class");
		
		console.log($(".class").html());
		
		// 匹配含有子元素或者文本的元素
		console.log($("td:parent").length);
	</script>
</html>

案例代码五：可见性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可见性选择器</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
		<table>
		  <tr style="display:none"><td>Value 1</td></tr>
		  <tr><td>Value 2</td></tr>
		</table>
		
		<form>
		  <input type="text" name="email" />
		  <input type="hidden" name="id" />
		</form>
		
	</body>
	<script>
		// 匹配所有不可见元素，或者type为hidden的元素
		$("tr:hidden").removeAttr("style");
		
		$("input:hidden").attr("type", "text");
		
		// 匹配所有的可见元素
		$("tr:visible").attr("style", "display:none");
		
		$("input:visible").attr("type", "hidden")
	</script>
</html>

案例代码六：属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
		<div>
		  <p>Hello!</p>
		</div>
		<div id="test2">World</div>
		
		<input type="checkbox" name="checkbox1" />唱
		<input type="checkbox" name="checkbox2" />跳
		<input type="checkbox" name="checkbox3" />Rap
		
		<input type="checkbox" name="man-news" />吃
		<input type="checkbox" name="milkman" />喝
		<input type="checkbox" name="letterman2" />拉
		<input type="checkbox" name="newmilk" />撒
	</body>
	<script>
		// 匹配包含给定属性的元素。
		console.log($("div[id]").html());
		
		// 匹配给定的属性是某个特定值的元素
		$("input[name='checkbox1']").attr("checked", "true");
		
		// 匹配给定的属性不是某个特定值的元素
		$("input[name!='checkbox1']").attr("checked", "true");
		
		// 匹配给定的属性是以某些值开始的元素
		$("input[name^=checkbox]").removeAttr("checked");
		
		// 匹配给定的属性是以某些值结尾的元素
		$("input[name$=2]").attr("checked", "true");
		
		// 匹配给定的属性是以包含某些值的元素
		$("input[name*='man']").attr("checked", "true");
		
		// 复合属性选择器，需要同时满足多个条件时使用。
		$("input[name$=2][name*='man']").attr("checked", "true");
	</script>
</html>

案例代码七：子元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素选择器</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
		<ul>
		  <li>John</li>
		  <li>Amy</li>
		  <li>Brandon</li>
		</ul>
		<ul>
		  <li>Glen</li>
		  <li>Heat</li>
		  <li>Jimmy</li>
		</ul>
		<ul>
		  <li>Arthur</li>
		</ul>
	</body>
	<script>
		// 匹配所给选择器( :之前的选择器)的第一个子元素
		console.log($("ul li:first-child").text());
		
		// 使用each进行遍历
		$("ul li:first-child").each(function() {
			console.log($(this).text())
		})
		
		// 匹配最后一个子元素
		console.log($("ul li:last-child").text());
		
		// 如果某个元素是父元素中唯一的子元素，那将会被匹配
		console.log($("ul li:only-child").text());
	</script>
</html>

案例代码八：表单选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单选择器</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
		<input type="button" value="Input Button" />
		<input type="checkbox" />

		<input type="file" />
		<input type="hidden" />
		<input type="image" />

		<input type="password" />
		<input type="radio" />
		<input type="reset" />

		<input type="submit" />
		<input type="text" />
		<select>
			<option>Option</option>
		</select>

		<textarea></textarea>
		<button>Button</button>
	</body>
	<script>
		console.log($("input").length);
		
		// 匹配所有 input, textarea, select 和 button 元素
		console.log($(":input").length);
		
		// 匹配所有 text 元素
		console.log($(":text").length);
	</script>
</html>

案例代码九：表单对象属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单对象属性选择器</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
		<form>
			<input name="email" disabled="disabled" />
			<input name="id" />
			<input type="checkbox" name="cb1" checked="checked"/>唱
			<input type="checkbox" name="cb2"/>跳
			<input type="checkbox" name="cb3" checked="checked"/>Rap
			
			<select>
			  <option value="1">唱</option>
			  <option value="2" selected="selected">跳</option>
			  <option value="3">Rap</option>
			</select>
		</form>
	</body>
	<script>
		// 匹配所有可用元素
		console.log($("input:enabled").length);

		// 匹配所有不可用元素
		console.log($("input:disabled").length);
		
		// 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
		console.log($("input:checked").length);
		
		// 匹配所有选中的option元素
		console.log($("select option:selected").length);
	</script>
</html>

jQuery 常用 Method-API

对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查

DOM 简述与分类

（A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)
（B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，跨浏览器(ie/firefox/Chrome)的标准规则	
（C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程
（D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS
（E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等

DOM 标准规则下的 jQuery 常用 API

each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
append()：追加到父元素之后
prepend()：追加到父元素之前
after()：追加到兄弟元素之后
before()：追加到兄弟元素之前 
attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加key-value属性对 $("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本    
remove()：删除自已及其后代节点  
val()：获取value属性的值
val("")：设置value属性值为""空串，相当于清空
text()：获取HTML或XML标签之间的值
text("")：设置HTML或XML标签之间的值为""空串 
clone()：只复制样式，不复制行为
clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
removeAttr()：删除已存在的属性
addClass()：增加已存在的样式
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式
offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
children()：只查询子节点，不含后代节点
next()：下一下兄弟节点
prev()：上一下兄弟节点
siblings()：上下兄弟节点
show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
slideUp()：向上滑动
slideDown()：向下滑动
slideToggle()：上下切换滑动，速度快点
find("选择器")：查询指定的节点和多重each()迭代

案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Method_API</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>
	</body>
	<script>
		var array = ['易烊千玺', '迪丽热巴', '欧阳娜娜'];
		
		var arr = $(array);
		
		// 以每一个匹配的元素作为上下文来执行一个函数
		arr.each(function () {
			console.log(this.toString())
		})
	</script>
</html>

jQuery 常用 Event-API

对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理

window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化
ready和onload同时存在时，二者都会触发执行，ready快于onload
change：当内容改变时触发
focus：焦点获取
select：选中所有的文本值
keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同
mousemove：在指定区域中不断移动触发
mouseover：鼠标移入时触发
mouseout：鼠标移出时触发
submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
click：单击触发
dblclick：双击触发
blur：失去焦点

Wyibo1124

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery概述John Resig 在2006年1月发布的一款跨主流浏览器的 JavaScript 库，简化 JavaScript 对 HTML 操作【API文档】https://jquery.cuishifeng.cn/index.html为什么要使用 jQuery写少代码,做多事情【write less do more】免费，开源且轻量级的js库，容量很小注意：项目中，提倡引用min版的js库兼容市面上主流浏览器，例如 IE，Firefox，Chrome注意：jQuery不是
复制链接

扫一扫