文章目录
一、JQuery的简介与安装
1.什么是JQuery
jQuery 是一款跨主流浏览器的 JavaScript 库,封装了 JavaScript 相关方法调用,简化JavaScript 对 HTML DOM 操作
2.为什么使用JQuery
- 减少代码量
- 免费,开源且轻量级的 js 库,容量很小
- 兼容市面上主流浏览器
- 能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果,异步 AJAX
IE 和 FireFox,Google 浏览器处理 AJAX,创建异步对象是不同的,IE是ActiveXObject
而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象
3.获取JQuery
官网下载地址:https://jquery.com/download/
两个版本:按照开发需求选择
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
二、JQuery语法
1.JQuery的入口函数
$(document).ready(function(){ // 执行代码 });
简写:$(function(){ // 执行代码 });
相当于:JavaScript的入口函数 window.onload = function () { // 执行代码}
两者的区别:
区别 | window.onload | $(document).ready() |
---|---|---|
执行时机 | 必须等到页面全部加载完毕(包括图片等)然后再执行包裹代码 | 只需要等到网页的DOM结构加载完毕后,就执行包裹的代码 |
执行次数 | 只能执行一次,第二次的话会覆盖第一次 | 可以执行多次,而且不会被覆盖 |
2.DOM对象和JQuery对象
DOM对象:由JavaScript语法创建的对象
JQuery对象:由JQuery语法表示的对象 (JQuery表示的对象都是数组)
① DOM 对象转换 JQuery 对象
方式:$(DOM对象)
②JQuery对象转换为DOM对象
方式一:JQuery对象.get(数组下标);
方式二:JQuery对象[数组下标];
例如: var obj=$("#text")[0];
3.JQuery选择器(重点)
①标签选择器
语法:$("标签名")
②id选择器
语法:$("#id")
③class 选择器
语法:$(".class 名称")
④所有选择器 (选取页面中所有 DOM 对象)
语法:$("*")
⑤组合选择器
语法:$("id,class,标签名")
⑥表单选择器
语法: $(":type 属性值")
例如: $(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
代码展示:
未使用选择器之前: | 使用选择器之后 |
---|---|
![]() | ![]() |
<script src="js/jquery-3.4.1.js"></script>
<style type="text/css">
div{
background-color: chartreuse;
width: 12.5rem;
height: 6.25rem;
}
</style>
<script>
$(function(){
$("div").css("background","red");
$(".div2").css("background","blue");
$("#div1").css("background","yellow");
$(":text").css("background","green");
$(":password").css("background","brown");
$(":file").css("background","black");
});
</script>
</head>
<body>
<div>我是标签选择器</div>
<div id="div1">我是id选择器</div>
<div class="div2">我是class选择器</div>
我是text<input type="text" /></br>
我是password<input type="password"/></br>
我是文档<input type="file" /></br>
</body>
4.JQuery过滤器
JQuery对象中存储的DOM对象顺序与页面标签声明的位置关系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]
(1)基本过滤器
①选择第一个 first, 保留数组中第一个 DOM 对象
语法:$("选择器:first")
②选择最后个 last, 保留数组中最后 DOM 对象
语法:$("选择器:last")
③选择数组中指定对象
语法:$("选择器:eq(数组索引)")
④选择数组中小于指定索引的所有 DOM 对象
语法:$("选择器:lt(数组索引)")
’
⑤选择数组中大于指定索引的所有 DOM 对象
语法:$("选择器:gt(数组索引)")
(2)表单对象属性过滤器
①选择可用的文本框
语法:$(":text:enabled")
②选择不可用的文本框
语法:$(":text:disabled")
③复选框选中的元素
语法:$(":checkbox:checked)
④选择指定下拉列表的被选中元素
语法:$("select>option:selected")
三、JQuery中的函数
① val()
$(选择器).val() :无参数调用形式, 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值):有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
②text()
$(选择器).text():无参数调用,读取数组中所有 DOM 对象的文字显示内容,将得到内容拼接为一个字符串返回
$(选择器).text(值):有参数方式,对数组中所有 DOM 对象的文字显示内容进行统一赋值
③attr()
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
④hide()
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
⑤ show()
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
⑥remove()
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
⑦empty()
$(选择器).empty():将数组中所有 DOM 对象的子对象删除
⑧append() 为数组中所有 DOM 对象添加子对象
$(选择器).append("<div>我动态添加的 div</div>")
⑨html() 设置或返回被选元素的内容(innerHTML)
$(选择器).html():无参数调用方法,获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值):有参数调用,用于设置 DOM 数组中所有元素的内容。
⑩each() 对数组,json,dom数组等的遍历
语法一:$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法二:jQuery 对象.each( function( index, element ) { 处理程序 } )
- index数组下标
- element数组的对象
代码展示:
<script >
$(function(){
$(":text").each(function(i,n){
alert("dom数组下标"+i+"value值"+n.value);
})
$.each(":text",function(i,n){
alert("dom数组下标"+i+"value值"+n.value);
})
});
</script>
</head>
<body>
<input type="text" value="张飞"/>
<input type="text" value="关羽"/>
<input type="text" value="刘备"/>
</body>
四、绑定事件
第一种方式
语法:$(选择器).监听事件名称(处理函数)
第二种方式
语法:$(选择器).on(event,,data,function)
- event:事件
- data:规定传递到函数的额外数据
- function:规定事件发生时运行的函数
代码展示:
$(":button").click(function(){
alert("牛逼");
});
$("#btn").on("click",{name:"liu"},function(event){
//event.data获取传入的参数 event为自定义名
alert(event.data.name);
});
五、JQuery-Ajax
1.$.ajax()
语法:$.ajax( { name:value, name:value, ... } )
参数说明:参数是 json 的数据,包含请求方式,数据,回调方法等
- async : 布尔值,表示请求是否异步处理。默认是 true
- contentType :发送数据到服务器时所使用的内容类型。
- data:规定要发送到服务器的数据 多数为JSON
- dataType:期望从服务器响应的数据类型
- type:规定请求的类型(GET 或 POST 等),默认是 get
- url:规定发送请求的 URL
- success:function(返回的数据){数据处理}
- error:function(返回的数据){数据处理}
2.$.get()
语法:$.get(url,data,function(data,status,xhr),dataType)
function(data,status,xhr)
- data - 包含来自请求的结果数据
- status - 包含请求的状态(“success”、“notmodified”、“error”、“timeout”、“parsererror”)
- xhr - 包含 XMLHttpRequest 对象
3.$.post()
语法:$.post(URL,data,function(data,status,xhr),dataType)
举例:使用 AJAX 级联查询(只展示前端代码)