/* 时间：2021/12/07 功能：CSS 目录: 一: 官网下载 二: 使用 三: 选择器 四: 选择器过滤 五: 选择器转移 六: 标签内容_获取和设置 七: 标签属性_获取和设置 八: 常用事件 九: 事件代理 十: ajax 1 get 2 post */
一: 官网下载
1 : 官网下载地址: https://code.jquery.com/
2 : 选择红框内链接下载。
二: 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入文件: jQuery - js -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 新的标签: jQuery - code -->
<script>
// 写法一: js
// window.onload = function(){
// var oDiv = document.getElementById("input1"); // 执行条件: 标签和资源 - 全部加载
// alert(oDiv);
// };
// // 写法二: jquery全写
// // $() - 函数; 函数名 - $
// $(document).ready(function(){
// // 变量名开头 - $;
// var $input = $("#input1");
// alert($input);
// });
// 写法三: jquery简写
$(function(){
var $input = $("#input1");
alert($input)
})
</script>
</head>
<body>
<div id="div1">哈哈</div>
<input id = "input1", type="button" value="按钮">
</body>
</html>
三: 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 选择器 - 标签
var $p = $("p");
console.log("标签选择器 <p>: " + $p.length); // 获取个数
$p.css({"color":"red"}); // 设置样式 - css
// 选择器 - class
var $div = $(".div1");
console.log("class选择器 <div>: " + $div.length); // 获取个数
// 选择器 - id
var $id = $("#id1");
console.log("id选择器 <div1>: " + $id.length); // 获取个数
$id.css({"background":"orange", "color":"red", "font-size":"26px"});
// 选择器 - 层级
var $h1 = $("div h1")
$h1.css({"color":"blue"})
// 选择器 - 属性
var $input = $("input[type=submit]")
$input.css({"color":"orange", "font-size":"26px"})
})
</script>
</head>
<body>
<p> hello </p>
<p> hi </p>
<div class="div1"> class_你好 </div>
<div id="id1"> id_你好 </div>
<div>
<h1> h1_你好 </h1>
</div>
<input type="submit", value="username">
<input type="button", value="按钮">
</body>
</html>
四: 选择器过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $divs = $("div");
// has : 选择器名称
$divs.has(".pname").css({"color":"blue"});
// eq : 索引
$divs.eq(1).css({"background":"blue"});
});
</script>
</head>
<body>
<div>
<p class="pname"> hi </p>
</div>
<div>
<input type="submit" id="name" value="username">
</div>
</body>
</html>
五: 选择器转移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function()
{
var $div = $("#box1");
// 定位标签 - 上一级
$div.prev().css({"color":"orange", "font-size":"26px"});
// 定位标签 - 上面同级
$div.prevAll().css({"text-indent":"50px"});
// 定位标签 - 下一级
$div.next().css({"color":"green"});
// 定位标签 - 下面同级
$div.nextAll().css({"text-indent":"50px"});
// 定位标签 - 同级其他
$div.siblings().css({"text-decoration":"underline"});
// 定位标签 - 父标签
$div.parent().css({"background":"gray"});
// 定位标签 - 所有子标签
$div.children().css({"color":"red"});
// 定位标签 - 指定子标签
$div.find(".sp1").css({"color":"green"});
})
</script>
</head>
<body>
<div>
<h4> 二级标签</h4>
</div>
<div>
<h3> 三级标签</h3>
<p> hi </p>
<div id="box1">
<span> I am </span>
<span class="sp1"> div </span>
标签
</div>
<h3> h3 </h3>
<p> hello</p>
</div>
</body>
</html>
六: 标签内容_获取和设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $("div");
// 获取内容
console.log($div.html());
// 设置内容
$div.html('<a href="http://www.bing.com"> 必应 </a>');
// 追加内容
$div.append('<a href="http://www.google.com"> 谷歌 </a>')
})
</script>
</head>
<body>
<div> hi </div>
</body>
</html>
七: 标签属性_获取和设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签
var $p = $("p");
// 获取样式
var $px = $p.css("font-size");
console.log($px);
// 设置样式
$p.css({"font-size":"30px", "background":"green"});
// 获取标签
var $text = $("#txt1");
// 获取属性
var $name = $text.prop("name")
var $type = $text.prop("type")
alert($name + " " + $type)
// 设置属性
$text.prop({"value":"张三", "class":"c_name"});
// val方法
alert($text.val()) // 获取属性 - value
$text.val("王五") // 设置属性 - value
})
</script>
</head>
<body>
<p> hi，I'm title </p>
<input type="text" name="username" id="txt1" value="李四">
</body>
</html>
八: 常用事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $lis = $("ul li");
var $btn = $("#btn1");
var $text = $("#txt1");
var $div = $("div");
// 事件处理: 点击事件 - lis
$lis.click(function(){
// // 写法一: js
// this.style.color = "red";
// 写法二: jquery
$(this).css({"color":"orange"});
alert($(this).index());
});
// 事件处理: 点击事件 - btn
$btn.click(function(){
alert($text.val());
});
// 事件处理: 获得焦点 - text
$text.focus(function(){
$(this).css({"background":"orange"});
});
// 事件处理: 失去焦点 - text
$text.blur(function(){
$(this).css({"background":"white"});
})
// 事件处理: 鼠标进入 - div
$div.mouseover(function(){
$(this).css({"background":"green"});
})
// 事件处理: 鼠标离开 - div
$div.mouseout(function(){
$(this).css({"background":"white"});
})
})
</script>
</head>
<body>
<div>
<ul>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
<input type="text" id="txt1">
<input type="button" id="btn1" value="Click me">
</div>
</body>
</html>
九: 事件代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $("#btn1");
var $div = $("#id_div_1");
$btn.click(function(){
alert("I'm button");
return false; // 取消事件冒泡
//return true; // 进行事件冒泡 : 条件 - 默认/true
});
$div.click(function(){
alert("I'm div");
});
// 事件代理: 子列表
var $ul = $("div ul")
$ul.delegate("li", "click", function(){
$(this).css({"color":"red"})
});
// 事件代理 : 不同子控件
var $div1 = $("#box")
$div1.delegate("#p2, #btn2", "click", function(){
alert("OK")
})
})
</script>
</head>
<body>
<div id="id_div_1">
<p id="p1"> hi </p>
<input type="button" value="but" id="btn1">
<ul>
<li>l_1_hi</li>
<li>l_2</li>
<li>l_3</li>
<li>l_4</li>
</ul>
</div>
<div id="box">
<p id="p2"> p_hi </p>
<input type="button" value="but_div" id="btn2">
</div>
</body>
</html>
十: ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// // 发送服务器 : ajax请求
// $.ajax({
// url:"data.json", // 无ip : 请求自己
// type: "get", // 请求方式: get post
// dataType:"JSON", // 请求类型: JSON
// data:{"name":"ls"}, // 请求参数
// success:function(data){ // 执行条件 : 请求成功
// console.log(data.name)
// },
// error:function(){ // 执行条件 : 请求失败
// alert("网络异常")
// },
// async: true // 是否异步 : 是
// });
// // 简写: ajax请求 - get
// // 参数: 请求地址; 请求参数; 成功回调函数; 返回数据解析方式; 失败回调函数
// $.get("data.json", {"name":"ls"}, function(data){
// alert(data.name);
// }, "JSON").error(function(){
// alert("网络异常");
// });
// 简写: ajax请求 - post
$.post("data.json", {"name":"ls"}, function(data){
alert(data.name);
}, "JSON").error(function(){
alert("网络异常");
})
</script>
</head>
<body>
</body>
</html>
{"name":"李四","age":20}
1 : 文件 data.json
1 get
1 : 启动本机服务器: python -m http.server
1 : 浏览器输入url查看。
1 : Console查看服务端Ajax返回内容。
2 post
1 : 虚拟机中Ubuntu启动该服务。
2 : 实体机中Windows浏览器输入url和端口查看。
3 : 可以看到服务器返回post请求结果。