学习记录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)
1808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
