学习笔记——jQuery

Posted 别呀

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习笔记——jQuery相关的知识，希望对你有一定的参考价值。

Jquey就是一款跨主流浏览器的javascript库，简化JavaScript对html操作就是封装了JavaScript，能够简化我们写代码的一个JavaScript库

文章目录

一、JQ的引入

JQ的引入有两种方式：本地文件引入、CDN引入。

1.1、本地文件引入

<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	$(function () {
		alert('hello');
          });
</script>

注意：jquery-1.11.3.min.js是从官网上下载好的，放在本地。

1.2、CDN引入

打开https://www.bootcdn.cn/jquery/，选择jQ版本，然后选择</>复制<script>标签
(要用CDN引入最重要的一点是：)

代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
	$(function () {
		alert('hello');
          });
</script>

1.3、为什么要引入 jQ

回顾 javascript，我们知道 JavaScript 定位到HTML的控件有三种基本的方式：

  1. 通过ID属性：document.getElementById()

  2. 通过NAME属性：document.getElementsByName()

  3. 通过标签名：document.getElementsByTagName()

我们发现，JavaScript 的方法名太长了，不易于书写代码……

引入jQ后，我们就可以用$()根据传入的参数判断它是获取ID属性的控件还是标签名的控件了。

示例：

(这里我就写主要代码部分)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<body>
	文本框：<input type="text" id="inp">
	<button id="btn1">js版本</button>
	<button id="btn2">jQ版本</button>
	<script type="text/javascript">
		// 使用JavaScript
		var btn1 = document.getElementById('btn1');
		btn1.onclick = function(){
		    var text1 = document.getElementById("inp").value;
			console.log(text1);
		}

		// 使用jQuery
		$(function () {   
			$("#btn2").click(function(){
			var text2 = $("#inp").val();
			console.log(text2);
           	});
           });

	</script>
</body>

结果：

二、基本使用

2.1、作为函数使用

2.1.1、作为一般函数使用

格式：$(回调函数)

作用：当文件加载完毕之后，执行此回调函数

示例：

(这里我就写主要代码部分)
<script type="text/javascript">
	$(function () {  //内部代码等到文档加载完毕之后才会执行
		console.log("你好");
          });
	console.log("我不好");
</script>

结果：

2.1.2、参数为选择器字符串

作用：查找所有匹配的标签，并且封装为 jQuery 对象

示例：

(这里我就写主要代码部分)
<body>
    <button id="btn1">点我</button>
	<script type="text/javascript">
		$(function () {
			$("#btn1").click(function(){
				console.log(this);
				console.log($(this).html());
               });
           });
	</script>
</body>

结果：

补充：注意到示例中获取jQ对象后，用了this ，这里this指代获取的dom对象。

2.1.3、参数为 dom 对象

作用：会将一个 dom 对象转为 jQuery 对象

示例：

(这里我不详细写了，具体看上个示例)
console.log($(this).html())

2.1.4、参数 html 标签字符串

作用：创建标签对象并封装为 jQuery对象

示例：

(这里我就写主要代码部分)
<body>
	<div>
    	<button id="btn1">点我，快点我</button>
	</div>
	<script type="text/javascript">
		$(function () {
			$("#btn1").click(function(){
				$('<input type="text" id="inp">').appendTo("div");
				//把按钮的值显示到文本框中，即向input赋值
				$("#inp").val($("#btn1").html());
               });
           });
	</script>
</body>

结果：

注意：
①若字符串用' '，如果 html 标签字符串中也要有字符串则全用" "；
②若字符串用" "，如果 html 标签字符串中也要有字符串则全用' '；
如：

$('<input type="text" id="inp">')
$("<input type='text' id='inp'>")

2.2、作为对象使用

2.2.1、遍历数组元素

示例：

<script type="text/javascript">
	var arr = [1,2,3]
	$.each(arr,function(index,element){ //index元素下标  element元素
		console.log("index:"+index+"，element:"+element);
          });
	// var arr = [1,'str',3]
	// 	$.each(arr,function(){ //index元素下标  element元素
	// 		console.log(this);
	//  });
</script>

结果：

index:0，element:1
index:1，element:2
index:2，element:3

2.2.2、获取所有元素

示例：

<body>
	<button type="button">点我，快点我1</button>
	<button type="button">点我，快点我2</button>
	<button type="button" id="btn">点我，快点我3</button>
	<button type="button">点我，快点我4</button>
	<script type="text/javascript">
		//获取所有的按钮
		var btns = $("button");
		//console.log(btns.length);   结果：4

		// 取出第二个按钮的文本内容
		// 注意：btns[1]或btns.get(1) 获取的元素是一个dom对象
		console.log(btns[1].innerHTML);
		console.log(btns.get(1).innerHTML);

		// 输出所有按钮的文本
		btns.each(function(){
			console.log(this.innerHTML);
		});

		// 输出“点我，快点我3”按钮是所有按钮里面的第几个
		console.log($("#btn").index());
	</script>
</body>

结果：

2.3、补充知识点

① $符号可以用 jQuery 代替，二者是等价的
如：

consoe.log($ === jQuery)  //结果是：true

② 注意 JavaScript 对象与 jQuery对象的区别：

用JavaScript语法创建的对象叫做JavaScript对象
用JQurey语法创建的对象叫做JQuery对象   $()返回的对象，是jQ对象
Jquery对象只能调用Jquery对象的API 
JavaScript对象只能调用JavaScript对象的API

如：

// 使用JavaScript
var btn1 = document.getElementById('btn1');
//这里btn1返回的是js对象，onclick是js的API
btn1.onclick = function(){
    var text1 = document.getElementById("inp").value;
	console.log(text1);
}

// 使用jQuery
$(function () {   
//$()返回的是jQ对象，它不能调用onclick，click是jQ的API
	$("#btn2").click(function(){
	var text2 = $("#inp").val();
		console.log(text2);
	});
});

三、选择器

选择器的基本语法和 css 使用选择器一致，只不过进行了扩展，只有在进行调用$() 并且将选择器作为参数传入才可以有作用，如：$("选择器"):根据选择器规则在整个页面中查找所有匹配的标签数组，并且封装成 jQuery对象返回。

示例 1：

<body>
<div id="box">div</div>
	<div>div2</div>
	<div class="divclass">div5</div>
	<div class="divclass">div6</div>
	<span>span1</span>
	<span class="divclass">span2</span>
	<span>span3</span>
	
	<ul>
	  	<li>编程语言</li>
	  	<li class="s1">python</li>
	  	<li class="s2">java</li>
	  	<li class="s2"><span>C/C++</span></li>
		<span>IT互联网</span>
	</ul>
	<script type="text/javascript">
		// 标题选择器      设置所有的div颜色
		$("div").css({"background":"red"});
		// id选择器        选择id为box的元素，并且设置颜色
		$("#box").css({"background":"green"});
		// 类选择器         选择所有类名为divclass的元素，并选择颜色
		$(".divclass").css({"background":"red"});
		// 并集选择器        设置所有的span和div
		$("div,span").css({"background":"red"});
		
		// 所有class=divclass的div
		$("div.divclass").css({"background":"red"});
		// 通配符选择器      选择所有元素，设置颜色
		$("*").css({"background":"red"});
	</script>
</body>

示例 2

<script type="text/javascript">
	//  1.选中ul下的所有span
 	$("ul span").css("background","red");
	// 2.选中ul下的所有子元素span
	$("ul>span").css("background","red");
	// 3.选中class=sku的下一个li
	$(".sku+li").css("background","red");
	//  4.选中ul下class=sku的后面所有兄弟元素
	$("ul .sku~*").css("background","red");
	
	// 过滤选择器
	// 选中第一个div
	$("div:first").css("background","red");
	// 选中最后一个div
	$("div:last").css("background","red");
	// 选中class属性不为box
	$("div:not(.box)").css("background","red");
	// 选中第二个和第三个li
	$("li:lt(3):gt(0)").css("background","red");
	// 选中第二个li
	$("li:eq(1)").css("background","red");
	// 选中内容为python学院的li
	$("li:contains(python学院)").css("background","red");
	// 选择有class属性为sku的li
	$("li[class=sku]").css("background","red");
	
	// $("li").eq(0);
 </script>

四、层次选择器

函数描述
parent( )父元素
children( )子元素
siblings( )兄弟
find( )后代
parents( )祖先

示例：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="jquery-3.1.1.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		.wrap {
			width: 330px;
			height: 30px;
			margin: 100px auto 0;
			padding-left: 10px;
			background-image: url(images/bg.jpg);
		}
		.wrap li{
			background-image: url(images/libg.jpg);
		}
		.wrap > ul > li {
			float: left;
			margin-right: 10px;
			position: relative;
		}
		.wrap a {
			display: block;
			height: 30px;
			width: 100px;
			text-decoration: none;
			color: #000;
			line-height: 30px;
			text-align: center;
		}
		.wrap li ul {
			position: absolute;
			top: 30px;
			/* 隐藏 */
			display: none;
		}
	</style>
	<body>
		<!-- 给一级菜单设置鼠标移入事件，二级菜单显示
			给一级菜单设置鼠标移出事件，二级菜单隐藏
		 -->
		 <div class="wrap">
		     <ul>
		         <li>
		             <a href="javascript:void(0);">一级菜单1</a>
		             <ul>
		                 <li><a href="javascript:void(0);">二级菜单1</a></li>
		                 <li><a href="javascript:void(0);">二级菜单2</a></li>
		                 <li><a href="javascript:void(0);">二级菜单3</a></li>
		             </ul>
		         </li>
		         <li>
		             <a href="javascript:void(0);">一级菜单1</a>
		             <ul>
		                 <li><a href="javascript:void(0);">二级菜单1</a></li>
		                 <li><a href="javascript:void(0);">二级菜单2</a></li>
		                 <li><a href="javascript:void(0);">二级菜单3</a></li>
		             </ul>
		         </li>
		         <li>
		             <a href="javascript:void(0);">一级菜单1</a>
		             <ul>
		                 <li><a href="javascript:void(0);">二级菜单1</a></li>
		                 <li><a href="javascript:void(0);">二级菜单2</a></li>
		                 <li><a href="javascript:void(0);">二级菜单3</a></li>
		             </ul>
		         </li>
		     </ul>
		 </div>
		<script type="text/javascript">
				var o = 0;
				$(".wrap>ul>li")<
以上是关于学习笔记——jQuery的主要内容，如果未能解决你的问题，请参考以下文章
 

 web前端开发JQuery常用实例代码片段(50个)


 [原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段


 jQuery源代码学习笔记：jQuery.fn.init(selector,context,rootjQuery)代码具体解释


 JQuery学习笔记


 JQuery的学习笔记


 jQuery学习笔记