一、jQuery
1.定义、作用及优缺点（百度Ai）：
2.下载：
jQuery官网：jQuery
版本兼容问题：jQuery 详解（含最新的3.x版本）_jquery3.x-CSDN博客
下载方法：JQuery安装与下载教程-CSDN博客
3.jquery使用：
jQuery官网：jQuery API 文档
注：使用jQuery，需引入js/jQuery*******.js文件
<script src="js/jQuery*******.js"></script>
<script>
// * 代表所有字符，只是举例，不能这么写，后面跟使用的版本，复制路径即可
</script>HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习1</title>
<!-- <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> -->
<style type="text/css">
</style>
<script type="text/javascript" src="js/jQuery-v1.12.4.min.js"></script>
<script>
$(function() {
alert($(".denglu"));
$(".mulu").css({
"background-color":"red"
})
alert("111");
})
</script>
</head>
<body>
<div id="div12">
<div class="denglu" id="denglu">
<h2>登录系统</h2>
<form id="loginForm" method="POST">
<div class="form-group">
<label for="user">user:</label>
<input type="text" name="user" id="user">
</div>
<div class="form-group">
<label for="password">password:</label>
<input type="password" name="password" id="password">
</div>
<div>
<button name="submt">登录</button>
</div>
</form>
</div>
</div>
<div class="mulu" id="mulu1">
<ul id="ul1">
<li id="li0">111
<ul><span>111</span><a href="https://www.baidu.com">2
</a></ul>
</li>
<li id="li1">222</li>
<li id="li0">333</li>
<li id="li1">444</li>
</ul>
<ul id="ul2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>示例(js)：
var $div12 = $("#div12"); //#div12 为id名
// 与JavaScript 中document.getElementById("div12")类似
$div12.css({"width":"30px"});
var $input = $("input[name=user]"); //input 为标签；name为input函数内属性名；
var $duo = $(".mulu ul #li0");
var $div = $("div"); //div 为标签名,若有多个，则会获取多个
var $divHasAbc123 = $div.has(".mulu"); //选择器过滤，在$div后，再筛选含有class="mulu"的标签;
var $divEq1 = $div.eq(1); //选择器过滤，索引过滤，下标0为第一个
var prev = $div.prev(); // 获取上一级同级元素
var prevAll = $div.prevAll(); // 获取上一级同级所有元素
var next = $div.next(); // 获取下一级同级元素
var nextAll = $div.nextAll(); // 获取下一级同级所有元素
var parent = $div.parent(); // 获取父元素
var children = $div.children(); // 获取所有子元素
var siblings = $div.siblings(); // 获取其他同级元素
var find = $div.find("#ul2"); // 获取"指定id=ul2的元素"
$div.html("<p>111111111111</p>") // 修改并覆盖标签div内容
$div.append("<p>111111111111</p>") // 追加内容
$div.porp("class") //获取元素属性
$("input[name=user]").val("1111") // 修改value值
$div.prop({"id":"id20240710","name":"div1"}) //设置元素属性,不会覆盖$(document).ready(function(){
//body...
//$ 其本质为函数,函数名为:$
// ready 页面标签加载完成后会执行ready事件，无需等待后面的资源数据
// 其缩写 $(function(){})
});
window.onload = function(){
//body...
//当前页面标签及标签内的资源数据都加载完成后才会触发
});
// 前者速度更快响应4.iQuery事件
4.1 常用事件
| 常用事件 | 说明 |
|---|---|
| click() | 鼠标单击 |
| blur() | 元素失去焦点 |
| focus() | 元素获得焦点 |
| mouseover() | 鼠标进入 |
| mouseout() | 鼠标离开 |
| ready() | DOM加载完成 |
例：
$("ul li").click(function(){
$(this).css({"color":"red"})
})4.2 object对象创建
var obj1 = new Object();
obj1.name ="张三";
obj1.age = "18";
obj1.show = function(){
alert(obj1)};
var obj2 = {
name:"张三",
age:18,
show:function(){alert(obj2)}
};5.事件代理
$(function(){
$("mulu1").click(function(){
$(this).css({"color":"yellow"});
alert("mulu1");
})
$("#ul1").click(function(){
$(this).css({"color":"red"});
alert("ul1");
// 若不想执行父事件，可加入以下代码
// return False;
})
})若点击标签ul1,事件会先执行点击事件$("#ul1")，然后执行点击事件$("#mulu1");
即事件会先从子事件慢慢向父事件传递。
5.1 事件代理指定：
可通过 父事件.delegate("子事件标签"，"代理事件函数名"，"执行事件函数") 进行指定;
$(function(){
// 1
$("#ul1").click(function(){
$(this).css({"color":"red"});
alert("ul1");
})
// 2
$("#mulu1").click(function(){
$(this).css({"color":"yellow"});
alert("mulu1");
})
// 3
$("#mulu1").delegate("#ul1,#ul2","click",function(){
$(this).css({"width":"40px","background":"green"});
alert("delegate111");
})
})若点击#ul1标签，则执行顺序为1->3->2;
若点击#ul2标签，则执行顺序为3->2;
6. Json
json 是JavaScript的首字母缩写，而JSON是类似于JavaScript对象的字符串，是一种数据格式。它有两种格式，第一种为对象格式，第二种为数组格式。
json例：
var Strjs1 = '{"name":"张三","age":18}';
// 将数据转成JavaScript对象
var js2 = JSON.parse(Strjs1);var Strjs1 = '[{"name":"张三","age":18},{"name":"李四","age":19}]';
// 将数据转成JavaScript对象
var js2 = JSON.parse(Strjs1);7. ajax
ajax 是 Asynchronous JavaScript and XML 的简写。可以同时发送多个请求，可以给局部位置使用；也可实现前端与后台服务器的数据交互。
Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
百度介绍：ajax（Web数据交互方式）_百度百科 (baidu.com)
Ajax工作原理：
7.1 ajax使用(不太会，会修改)
jquery中$.ajax()可以执行这个请求。
$.ajax({
// 请求地址
url:"https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1pMnJb.img? h=128&w=128&m=6",
// 请求方式
type:"GET",
// 设置发送给服务器的数据
// data：{"name":"张三","age":18},
// 设置响应体类型(url返回的数据格式不是js,不能用json)
// dataType:'json'，
// 请求成功的回调函数
success:function (response) {
console.log(response);
},
// 请求异常的回调函数
error:function(){
alert("error!")
},
// 是否异步 默认Ture
// async:Ture
});异步请求：JQuery使用$.ajax()实现异步请求_jquery使用ajax发送异步请求获取数据-CSDN博客
简写$.get() 和$.post():
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
