JQuery 基础知识学习（详尽版）

JQuery 基本操作
项目经理(作者)：张明星
掌握Jquery的下载、安装和使用的方法
掌握Jquery的选择器和事件机制 重点
掌握Jquery的元素遍历方法 重点
掌握Jquery样式的操作 重点

jQuery 安装
jQuery 是一个 JavaScript 库。
下载地址

如果下载不了直接在网页打开了，可以直接复制网页打开后的代码，新建js文件，复制粘贴即可

下载好之后直接复制js文件到项目中，使用script标签引入即可

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

jQuery 语法

基础语法：

$(selector).action()

说明：

• 美元符号($)：定义jQuery
• 选择符(selector)：“查询"和"查找” HTML 元素
• action()： 执行对元素的操作

获得内容 - text()、html() 以及 val()

• text() - 设置或返回所选元素的文本内容 – innerText
• html() - 设置或返回所选元素的内容（包括 HTML 标记） - innerHTML
• val() - 设置或返回表单字段的值 – value
• attr(‘name’) - 设置/改变属性值 – getAttribute - setAttribute

每个函数都可以接受函数类型的参数，如：

参数	描述
function(index,oldValue)	index - 选择器的 index 位置。element - 当前的元素（也可使用 “this” 选择器）

$("li").each(function(){
    
	alert($(this).text()) 
});

如：

$("#test1").text("Hello world!");
$("#test1").text(function(index,oldValue){
    
	return oldValue + "/jquery"; 
});

$("#test2").html("<b>Hello world!</b>");
$("#test2").html(function(index,oldValue){
    
	return oldValue + "/jquery"; 
});

$("#test3").val("RUNOOB");
$("#test3").val(function(index,oldValue){
    
	return oldValue + "/jquery"; 
});

$("#runoob").attr("href","http://www.baidu.com ");
$("#runoob").attr({
    
	"href" : "http://www.baidu.com ", 
	"title" : "jQuery 教程" 
});
$("#runoob").attr("href", function(index,oldValue){
    
	return oldValue + "/jquery"; 
});

jQuery 选择器

$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a>元素
$(":button")	选取所有 type="button" 的 <input>元素 和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

jQuery 选择器（大全）

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".intro")	所有 class=“intro” 的元素
element	$("p")	所有 <p>元素
.class.class	$(".intro.demo")	所有 class=“intro” 且 class=“demo” 的元素
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header") 所有标题元素 <h1> - <h6>
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p>元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 “#” 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 “#” 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 “.jpg” 结尾的元素
:input	$(":input")	所有<input>元素
:text	$(":text")	所有 type=“text” 的 <input>元素
:password	$(":password")	所有 type=“password” 的 <input>元素
:radio	$(":radio")	所有 type=“radio” 的 <input>元素
:checkbox	$(":checkbox")	所有 type=“checkbox” 的<input>元素
:submit	$(":submit")	所有 type=“submit” 的 <input> 元素
:reset	$(":reset")	所有 type=“reset” 的 <input> 元素
:button	$(":button")	所有 type=“button” 的<input> 元素
:image	$(":image")	所有 type=“image” 的 <input> 元素
:file	$(":file")	所有 type=“file” 的<input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

举例

//1.基本选择器
$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

//2.层次选择器
 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

//3.过滤选择器(重点)
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

//3.2内容过滤选择器
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

//3.3可见性过滤选择器
$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

//3.4属性过滤选择器
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

//3.5状态过滤选择器
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

//4.表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

jQuery 事件

ready()

文档加载完毕事件，当文档全部加载完毕之后执行，等价于window.onload事件

$(function() {
   
	// 代码
})
// Or
$(document).ready(function() {
   
	// 代码
});

holdReady()

暂停ready()事件，holdReady(true)暂停执行，holdReady(false)取消暂停，则会执行

$.holdReady(true)

$(document).ready(function() {
   
	$("#first").click(function() {
   
		alert("解除延迟后被弹出");
	})
})

$("#second").click(function() {
   
	$.holdReady(false);
})

on()

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。如需移除事件处理程序，请使用 off() 方法。

语法：

$(selector).on(event[,childSelector][,param],function)

如：

$(document).ready(function(){
   
	$("div").on("click","p",function(){
   
		alert("div中的p段落被点击了。");
	});
});

off()

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

语法：

$(selector).off(event,selector,function(eventObj),map