学习记录27
一、介绍
1、什么是 jQuery
- JavaScript 库,封装了 JavaScript 相关方法调用
2、为什么使用 jQuery
- 使用一种方式在不同的浏览器创建 AJAX异步对象
- 能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步 AJAX功能
- 成熟的插件可供选择,多种 js 组件
- 出错后,有一定的提示信息
- 不用再在 html 里面通过
3、DOM 对象和 jQuery 对象
- DOM对象,使用javascript的语法创建的对象叫做DOM对象, 也叫js对象
var obj= document.getElementById("txt1"); // obj是dom对象,也叫做js对象
obj.value;
- jQuery对象: 使用 jQuery 语法表示对象叫做 jQuery 对象, 注意:jquery表示的都是数组
var jobj = $("#txt1"); // jobj就是使用jquery语法表示的对象,也就是jquery对象
// 它是一个数组,现在数组中就一个值。
-
DOM 对象可以和 jQuery 对象相互的转换
- dom对象可以转为jquery , 语法:
$(dom对象)
- jquery对象也可以转为dom对象, 语法:从数组中获取对象, 使用[i]或者get{i)
- dom对象可以转为jquery , 语法:
-
jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了 js 方法
二、选择器
1、定义
- 即定位条件;通知 jquery 函数,定位满足条件的 DOM 对象
2、加入 jQuery 库
// 使用相对路径
<script type="text/javascript" src="./js/jquery-3.4.1.js">
<script type="text/javascript">
/*
解释:
1. $(document),其中 $ 是jQuery的函数名称;document是函数的参数,
其作用是将 document 对象变成 jQuery 函数库可以使用的对象
2. ready,是 jQuery 的函数,作用是当页面的DOM对象加载成功后,自动执行
ready函数的具体内容,相当于js中的onLoad事件
3. function() 自定义ready函数要实现的具体功能
*/
$(document).ready(function(){
// 自定义功能代码
window.alert("Hello jQuery");
})
</script>
3、基本选择器
- id 选择器:$("#id")
- class 选择器:$(".class名称")
- 标签选择器:$(“标签名”)
- 所有选择器:$("*")
选取页面中所有 DOM 对象 - 组合选择器:语法:$(“id,class,标签名”)
多个被选对象间使用逗号分隔后形成的选择器,可以组合 id,class,标签名等
4、表单选择器选择器
- 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式
- 无论是否存在表单,均可做出相应选择
- 例如:
- $(":text"):选取所有的单行文本框
- $(":password"):选取所有的密码框
- $(":radio"):选取所有的单选框
- $(":checkbox"):选取所有的多选框
- $(":file"):选取所有的上传按钮
5、过滤器
- jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]
- 过滤器就是过滤条件,对已经定位到数组中 DOM 对象进行过滤筛选
- 过滤器不能单独使用, 必须和选择器一起使用,出现在选择器后方
- 基本过滤器:
- 1)$(“选择器:first”) : 第一个dom对象
- 2)$(“选择器:last”): 数组中的最后一个dom对象
- 3)$(“选择器:eq(数组的下标)”) :获取指定下标的dom对象
- 4)$(“选择器:lt(下标)”) : 获取小于下标的所有dom对象
- 5)$(“选择器:gt(下标)”) : 获取大于下标的所有dom对象
- 表单对象属性过滤器
- 1)$(“:text:enabled”):选择可用的文本框
- 2)$(“:text:disabled”):选择不可用的文本框
- 3)$(“:checkbox:checked”):复选框选中的元素
- 4)选择器>option:selected:选择指定下拉列表的被选中元素
三、函数
1、val 函数
- 操作数组中 DOM 对象的 value 属性
- $(选择器).val() :无参数调用形式, 读取数组中第一个 DOM 对象的 value 属性值
- $(选择器).val(值):有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
2、text 函数
- 操作数组中所有 DOM 对象的【文字显示内容属性】
- $(选择器).text():无参数调用,读取数组中所有 DOM 对象的文字显示内容,将得到内容拼接为一个字符串返回
- $(选择器).text(值):有参数方式,对数组中所有 DOM 对象的文字显示内容进行统一赋值
3、attr 函数
- 对 val, text 之外的其他属性操作
- $(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
- $(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
4、hide 函数
- $(选择器).hide() :将数组中所有 DOM 对象隐藏起来
5、show 函数
- $(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
6、remove 函数
- $(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
7、empty 函数
- $(选择器).empty():将数组中所有 DOM 对象的子对象删除
8、append 函数
- 为数组中所有 DOM 对象添加子对象
- $(选择器).append(“
我动态添加的 div”)
9、html 函数
- 设置或返回被选元素的内容(innerHTML)
- $(选择器).html():无参数调用方法,获取 DOM 数组第一个匹元素的内容。
- $(选择器).html(值):有参数调用,用于设置 DOM 数组中所有元素的内容。
10、each 函数
- each 是对数组,json 和 dom 数组等的遍历,对每个元素调用一次函数
- 语法 1:$.each( 要遍历的对象, function(index,element) { 处理程序 } )
- 语法 2:jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象
四、事件
为页面元素绑定事件,即对于指定页面元素,当某个事件发生后,执行指定动作
1、定义元素监听事件
- 语法:$(选择器).监听事件名称(处理函数);
- 如,为页面中所有的 button 绑定 onclick并关联处理函数 fun1:
$("button").click(fun1)
为页面中所有 tr 标签绑定 onmouseover并关联处理函数 fun2:$("tr").mouseover(fun2)
2、on() 绑定事件
- on() 方法在被选元素上添加事件处理程序
- 语法:
$(选择器).on(event,,data,function)
event:事件一个或者多个,多个之间空格分开
data:可选。规定传递到函数的额外数据,json 格式
function: 可选。规定当事件发生时运行的函数。 - 例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<style type="text/css">
div{
background-color: gray;
width: 200px;
height: 80px;
}
</style>
<script type="text/javascript">
$(function(){ // 自动加载该function
$("#btn1").on("click", function(){ // 为button按钮添加具体的功能事件
// 在div样式块中,添加新的语句——button按钮,注:无论按几次,id都相同,
$("#mydiv").append("<button id='mybutton'>我是添加的新Button</button>");
// 为所有相同id的按钮添加具体功能事件
$("#mybutton").on("click", function(){
alert("新Button被按下");
})
})
})
</script>
</head>
<body>
<p>功能按钮</p>
<button id="btn1">动态添加Button</button>
<BR/></BR>
<div id="mydiv"></div>
<p>可以点击我</p>
</body>
</html>
五、AJAX
jQuery 提供多个与 AJAX 有关的方法,您能够从远程服务器上把接收的数据更新到 DOM 对象
1、$.ajax()
- jQuery 中 AJAX 请求的核心方法,所有的其他方法都是在内部使用此方法
- 语法:
$.ajax( { name:value, name:value, ... } )
- $.ajax()参数是一个json的结构, 例如:
$.ajax(
{
async:true , // 布尔值,表示请求是否异步处理。默认是 true
contentType:"application/json" , // 发送数据到服务器时所使用的内容类型。默认是: "application/x-www-form-urlencoded"
data: {name:"lisi",age:20 }, // 规定要发送到服务器的数据,可以是:string, 数组,多数是 json
dataType:"json", // 可选。规定预期的服务器响应的数据类型
error:function(){
//请求出现错误时,执行的函数
},
success:function( data,status,xhr) { // 可选。当请求成功时运行的函数
// data 就是responseText, 是jquery处理后的数据。
// status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror")
// xhr - 包含 XMLHttpRequest 对象
},
url:"bmiAjax", // 必需。规定您需要请求的 URL
type:"get" // 规定请求的类型(GET 或 POST 等),默认是 GET, get,post 不用区分大小写
}
)
2、$.get()
- $.get() 方法使用 HTTP GET 请求从服务器加载数据。
- 语法:
$.get(url,data,function(data,status,xhr),dataType)
3、$.post()
- $.post() 方法使用 HTTP POST 请求从服务器加载数据。
- 语法:$.post(URL,data,function(data,status,xhr),dataType)