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,反之亦然
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery入门2</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="button" id="id" value="我就是个按钮" />
</body>
<script>
// 获取js对象
var inputElement = document.getElementById("id");
alert("js类型:" + typeof inputElement);
// js对象转jquery对象
var jqueryElement = $(inputElement);
alert("jquery类型:" + typeof jqueryElement);
// jquery对象转为js对象
var jsObject = jqueryElement.get(0);
alert("js类型:" + jsObject.value);
</script>
</html>
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery常见方法</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="id">易烊千玺</div>
<input value="送你一朵小红花" type="button" class="class"/>
<span>真帅</span>
<p style="color: red; width: auto;">俺是P标签</p>
</body>
<script>
var idElement = $("#id");
var classElement = $(".class");
var spanElement = $("span");
var pElement = $("p");
// 获取标签之间的内容
console.log(idElement.text());
// 获取元素的值
console.log(classElement.val());
// 获取元素的内容
console.log(spanElement.html());
// 获取css样式
console.log(pElement.css("color") + ":" + pElement.css("width"));
// 添加css样式
pElement.css({"color" : "green"});
// 获取同种类型元素的数量
console.log($("div").length;
</script>
</html>
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:失去焦点