该文详细介绍了jQuery的基本概念，包括其作为JavaScript库的作用，安装方法（下载与CDN引用），以及核心功能如文档就绪函数、JavaScript对象与jQuery对象的转换、选择器的使用（基本、层次、过滤和表单选择器）和事件处理。此外，还涉及了jQuery在DOM操作和CSS操作上的应用。
后端程序员的前端必备-jQuery核心学习笔记
jQuery
1 jQuery概述
1.1 jQuery简介
jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
1.2 jQuery作用
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities 函数库
2 jQuery的安装【重要】
2.1 引用jQuery库
- 官网下载jQuery库 https://jquery.com/
- 有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，便于可读）。
jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src=“”>< /script> 标签引用
<!--引入jQuery库-->
<script src="js/jquery-3.4.1.min.js"></script>
2.2 CDN引用
CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
- 常见的CDN
- 百度 CDN
https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js- 新浪 CDN
https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js- 又拍云 CDN
https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js- 七牛
http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js- 360
http://libs.useso.com/js/jquery/2.0.0/jquery.min.js- 谷歌
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js- 官网
http://code.jquery.com/jquery-1.11.1.min.js- 微软
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
3 jQuery使用
3.1 文档就绪函数
- 好处：确保页面的上元素都加载了之后再执行js代码
- 原生的js：window.onload = function(){…}
- jQuery:jQuery(document).ready(function(){…} 简写为：$(function(){})
- 区别：
- window.onload要等到页面完全加载完成之后在才会执行，而$(function(){}只需要页面结构加载出来就执行。
- window.onload只能执行一次，而$(function(){}可以执行多次。
<script>
//使用js方式获取输入框中的内容
//console.log(document.getElementById("username").value); // 错误，因为前端代码加载顺序从上到下
//解决：当页面加载完成之后再获取
// window.onload = function(){
// console.log(document.getElementById("username").value);
// }
//使用jQuery的方式获取输入框中的内容
// jQuery(document).ready(function(){
// console.log(document.getElementById("username").value);
// })
//简写：
// $(function(){
// console.log(document.getElementById("username").value);
// })
// window.onload = function(){
// console.log("js文档就绪函数1")
// }
// window.onload = function(){
// console.log("js文档就绪函数2")
// }
// $(function(){
// console.log("jQuery文档就绪函数1")
// })
// $(function(){
// console.log("jQuery文档就绪函数2")
// })
</script>
<input type="text" name="username" id="username" value="hello,jQuery"/>
3.2 js对象和jQuery对象【重要】
- js对象
- var p = document.getElementById(“p1”); //[object HTMLParagraphElement]
- jQuery对象
- var $p = $(“#p1”); // [object Object]
- js对象和jQuery对象的互转
- 将js对象转换成jQuery对象
- var $p = $(js对象);
- 将jQuery对象转换成js(jQuery默认就是数组)
- var p = jQuery对象[下标];
/**
* js对象和jQuery对象的区别【重要】
* jQuery对象永远都是一个js对象数组。
*
* js对象与jQuery对象的互相转换
* jQuery对象转换成js对象 jQuery对象[下标]
* js对象转换成jQuery对象 $(js对象)
*
*/
$(function(){
//使用js方式获取p标签
var p = document.getElementById("p1");
//alert(p); //[object HTMLParagraphElement] js对象
//alert(p.innerHTML);
//alert(p.html()); //错误
//alert($(p).html()); 正确的
//使用jQuery方式获取p标签
var $p = $("#p1");
// alert($p); //[object Object] jQuery对象
//alert($p.html())
//alert($p.innerHTML);//错误
alert($p[0].innerHTML);
})
4 jQuery选择器【重要】
4.1 基本选择器
- 标签选择器
- class选择器
- id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery -->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>这是一个p标签</p>
<span id="s">这是一个span标签</span>
<div class="a">这是一个div标签</div>
<script>
$(function(){
//标签选择器
//alert($("p").length);
//id选择器
//alert($("#s").length);
//class选择器
//alert($(".a").length);
})
</script>
</body>
</html>
4.2 层次选择器
- 后代选择器
- parent child
- 子代选择器
- parent>child
- 相邻选择器
- prev + next
- 兄弟选择器
- prev ~ siblings
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery -->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<span>这是div后面的span3</span>
<span>这是div后面的span4</span>
<div id="d1">
<p>这是子代p标签</p>
<div>
<p>这是后代p标签</p>
</div>
</div>
<span>这是div后面的span1</span>
<span>这是div后面的span2</span>
<div>
<span>这是div后面的span3</span>
</div>
<script>
//后代选择器
//alert($("#d1 p").length);
//子代选择器
//alert($("#d1>p").length);
//相邻元素选择器
//alert($("#d1+span").html());
//兄弟元素选择器
//alert($("#d1~span").length);
</script>
</body>
</html>
4.3 过滤选择器
- :first 过滤第一个
- :last 过滤最后一个
- :even 过滤偶数
- :odd 过滤奇数
- :eq(下标) 过滤指定下标
- :lt(下标) 过滤小于指定下标
- :gt(下标) 过滤大于指定下标
- :not(选择器) 排除指定的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery -->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<ul>
<li>武汉1</li>
<li>宜昌2</li>
<li>襄阳3</li>
<li>荆州4</li>
</ul>
<ul id="city">
<li>武汉</li>
<li>宜昌</li>
<li id="xy">襄阳</li>
<li>荆州</li>
</ul>
<script>
//简单过滤选择器 :first 过滤第一个元素
//alert($("#city li:first").html());
//alert($("ul:first"));
//简单过滤选择器 :last 过滤最后一个元素
//alert($("#city li:last").html());
//简单过滤选择器 :odd 过滤所有的奇数元素 下标从0开始
//$("#city li:odd").css("backgroundColor","red");
//简单过滤选择器 :even 过滤所有的偶数元素 下标从0开始
//$("#city li:even").css("backgroundColor","red");
//简单过滤选择器 :eq 过滤指定下标元素 下标从0开始
//$("#city li:eq(1)").css("backgroundColor","red");
//简单过滤选择器 :lt 过滤小于指定下标元素 下标从0开始
//$("#city li:lt(2)").css("backgroundColor","red");
//简单过滤选择器 :gt 过滤大于指定下标元素 下标从0开始
//$("#city li:gt(2)").css("backgroundColor","red");
//简单过滤选择器 :not(选择器) 过滤不是指定元素的其他元素
$("#city li:not('#xy')").css("backgroundColor","red");
</script>
</body>
</html>
4.4 表单选择器
- :input 包含表单中所有的元素(input、button、textarea、select)
- :text 选择表单中所有的type=text元素
- :password 选择表单中所有的type=password元素
- :enabled 选择表单中所有的可用元素
- :disabled 选择表单中所有的可用元素
- :checked 选择单选和复选被选中的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery -->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" name="username" disabled><br>
<input type="password" name="password"><br>
<input type="radio" name="sex" value="男" checked>男<br>
<input type="radio" name="sex" value="女">女<br>
<input type="checkbox" name="hobby" value="篮球">篮球<br>
<input type="checkbox" name="hobby" value="足球">足球<br>
<input type="checkbox" name="hobby" value="排球">排球<br>
<button>表单按钮</button><br>
文本域<textarea></textarea>
<br>
<select>
<option value="武汉">武汉</option>
<option value="上海" selected>上海</option>
<option value="北京">北京</option>
</select>
</form>
<button onclick="f1()">全选</button>
<button onclick="f2()">全不选</button>
<script>
//:input 包含表单中所有的元素(input、button、textarea、select)
//alert($(":input").length);
//:text 选择表单中所有的type=text元素
//alert($(":text").length);
//:password 选择表单中所有的type=password元素
//alert($(":password").length);
//:radio 选择表单中所有的type=radio元素
//alert($(":radio").length);
//:checkbox 选择表单中所有的type=checkbox元素
//alert($(":checkbox").length);
//选择所有的checkbox。设置checked属性为true
//$(":checkbox").attr("checked","true");
//:enabled 选择表单中所有的可用元素
//alert($(":enabled").length);
//:disabled 选择表单中所有的可用元素
//alert($(":disabled").length);
//:checked 选择单选和复选被选中的元素
//alert($(":radio:checked")[0].value);
function f1(){
$(":checkbox").prop("checked",true);
}
function f2(){
$(":checkbox").prop("checked",false);
}
//:selected 选择单选和复选被选中的元素
//alert($(":selected").val());
</script>
</body>
</html>
5 jQuery的事件
jQuery中的事件与Javascript中的事件基本一致。jQuery中的事件就是js中的事件省略on
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery -->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<input type="text" name="username"/>
<input type="password" name="aaa"/>
<select>
<option value="武汉">武汉</option>
<option value="上海" selected>上海</option>
<option value="北京">北京</option>
</select>
<button onclick="f1()">按钮2</button>
<script>
//在js中给button绑定事件
// var btn = document.getElementById("btn");
// btn.onclick = function(){
// alert("点击事件");
// }
//在jQuery中绑定事件
// $("#btn").click(function(){
// alert("点击事件");
// })
// $(":text").blur(function(){
// alert("失去焦点事件");
// })
// $("select").change(function(){
// //var value = $(":selected").val();
// //this是当前绑定事件的对象。是一个js对象
// alert("下拉框内容改变了..."+$(this).val());
// })
// $(":password").focus(function(){
// alert("获取焦点事件");
// })
/**
* 总结：
* 1、jQuery中的事件绑定，就是js事件绑定去掉on
* 2、jQuery在绑定事件的时候参数为回调函数(事件触发之后执行)
* a、传递参数：表示设置事件(什么时候触发什么时候执行)
* b、不传参数：表示执行事件(立即执行)
*/
function f1(){
alert("按钮2执行了。。。。");
}
//立即执行事件
$("button:eq(1)").click();
</script>
</body>
</html>
如果有参数，表示设置事件(什么触发事件，什么时候执行)
如果没有参数，表示触发事件，立即执行
6 jQueryDOM操作
6.1 jQuery获取节点元素值
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
6.2 jQuery操作DOM节点
用于添加新元素节点的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
用于删除新元素节点的两个 jQuery 方法：
- remove() - 删除选中元素(及其子元素)
- empty() - 删除选中元素的所有子元素
6.3 jQuery操作CSS
jQuery 拥有若干进行 CSS 操作的方法。
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
扫一扫
617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
