写在前面
上课第15天，打卡：
张国臂掖，以通西域；
###########
# 课上简书 #
##########
http://jquery.cuishifeng.cn/index.html
JQuery对象： Jquery.方法 $.方法
# Jquery和$是完全一样的
JQuery的方法只能JQuery对象调用
JS的方法只能JS使用
变量命名：
JS var $variable = jQuery 对象
JQuery var variable = DOM 对象
JQuery语法：$(selector).action()
selector 选择器
action 对标签的操作
JQuery的选择器(selector)
基本选择器
层级选择器
...
$(".p1").css("color","red");
JQuery 选择器选到的是一个集合对象(一组标签)，后面的操作会循环加载；
但是JS不支持，JS必须自己写循环处理；
JQuery支持链式操作
JQuery固有属性 --> prop
input type="checked"
selected=selected
自定义的属性 --> attr
clone
参考：http://www.cnblogs.com/yuanchenqi/articles/6936986.html
一、JQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象; jQuery 对象是 jQuery 独有的.; 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action() 参考：http://jquery.cuishifeng.cn/
二、JQuery查找元素
1.选择器
基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器
$(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)
表单选择器
$("[type=‘text‘]") ---可简写成-->$(":text")
// 注意只适用于input标签 : $("input:checked")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--首先引入Jquery库-->
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<!--<span>span</span>-->
<!--<p>ppp</p>-->
<!--<p class="p1">ppp</p>-->
<!--<p class="p1">ppp</p>-->
<!--<div id="d1">DIV</div>-->
<!--++++++++++-->
<div class="outer">
<p>p1</p>
<div class="inner">
<p>p2</p>
</div>
</div>
<p>p3</p>
<a href="">click</a>
<p>p4</p>
<div egon="xialv">11</div>
<div egon="xialv2">22</div>
<input type="checkbox">
<input type="text">
<script>
//基本选择器
// $("span")
// $("*")
// $(".p1").css("color","red");
// $("#d1").css("color","blue");
// $(".class,p,div") // 多元素选择器
//层级选择器
// 后代选择器
// $(".outer p").css("color","red");
// 子代选择器
// $(".outer>p").css("color","red");
// 毗邻选择器 (紧挨着的兄弟标签)
// $(".outer+p").css("color","red");
// 兄弟选择器 (所有的兄弟标签)
// $(".outer~p").css("color","red");
//属性选择器
// 自定义属性
$("[egon]").css("color","green");
$("[egon=‘xialv2‘]").css("color","green");
//表单选择器
$("[type=‘text‘]").css("border","1px solid red");
// 可以简写成如下形式，仅适用于input标签
$(":text").css("border","1px solid red");
</script>
</body>
</html>
2.表单属性选择器
:enabled
:disabled
:checked
:selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--<input type="checkbox" value="123">-->
<!--<input type="checkbox" value="456" checked>-->
<select id="sel">
<option value="1" selected="selected">Flowers</option>
<option value="2">Gardens</option>
<option value="3">Trees</option>
<option value="4">Fruits</option>
</select>
</form>
<script src="jquery-3.1.1.js"></script>
<script>
// $("input:checked").each(function(){
// console.log($(this).val())
// })
// console.log($("input:checked").length); // 1
console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
$("option:selected").each(function () {
console.log("--> " + $(this).val());
})
$("#sel").change(function () {
console.log($(this).val());
})
</script>
</body>
</html>
3.筛选器
# 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul class="outer">
<li class="item">11</li>
<li class="item">22</li>
<li class="item">33</li>
<li class="item">44</li>
<li class="item">55</li>
<li class="item">66</li>
<li class="item">77</li>
<li class="item">88</li>
<li class="item">99</li>
<li class="item">1010</li>
</ul>
<script>
// eq 索引
// $("ul li").eq(4).css("color","red"); // 推荐
// $("ul li:eq(4)").css("color","red"); // 需要自己拼接字符串，比较麻烦
$("ul li").first().css("color","red");
$("ul li:lt(5)").css("color","red");
$("ul li:gt(5)").css("color","red");
$("ul li:even").css("color","red"); // 奇数
$("ul li:odd").css("color","red"); // 偶数
</script>
</body>
</html>
# 导航查找(查找筛选器)
查找子标签： $("div").children(".test") $("div").find(".test")
向下查找兄弟标签： $(".test").next() $(".test").nextAll()
$(".test").nextUntil()
向上查找兄弟标签： $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents()
$(".test").parentUntil()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="item1">11</div>
<div class="item2">22</div>
<div class="item3">33</div>
<div class="item4">44</div>
<div class="item5">55</div>
<div class="outer">
<div class="inner">
<p id="p1">p1</p>
</div>
<p>p2</p>
</div>
<p>p3</p>
<script>
// 向下查找兄弟标签
// $(".item1").next().css("color","red");
// $(".item1").nextAll().css("color","red");
// $(".item1").nextUntil(".item5").css("color","red");
// 查找所有兄弟标签
$(".item3").siblings().css("color","red");
// 查找子代标签
// $(".outer").children().css("color","red");
$(".outer").children("p").css("color","red");
// 查找后代标签
$(".outer").find("p").css("color","red");
// 查找父标签
$("#p1").parent().css("color","red");
$("#p1").parents().css("color","red");
$("#p1").parentsUntil(".outer").css("color","red");
</script>
</body>
</html>
三、JQuery操作元素
1.JQuery事件
# 页面载入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<script>
// 对应 JS 的onload事件
// $(document).ready(function () {
// $(".p1").css({"color":"red","font-size":"50px"});
// });
// 可以简写成如下形式：
$(function () {
$(".p1").css("color","blue");
})
</script>
</head>
<body>
<p class="p1">PPP</p>
</body>
</html>
# 事件绑定
//JS事件绑定： js的标签对象.on事件=函数
//JQuery事件绑定： $().事件(函数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<button>ADD</button>
<script>
$("button").click(function () {
$("ul").append("<li>666</li>");
});
//JS事件绑定： js的标签对象.on事件=函数
//JQuery事件绑定： $().事件(函数)
// 给 li 绑定点击事件(第一种绑定方式)，点击一次就执行相关操作
// 但是 button 增加的li点击不生效
$("ul li").click(function () {
console.log($(this).text());
alert(123);
});
// 第二种绑定方式
// on方法实现事件绑定 (JQuery 3 里统一用on)
$("ul li").on("click",function () {
alert(456);
});
// 事件委派 -> ul 把事件下发到子标签li
// 这样写会避免新添加的子标签无法响应事件的bug
$("ul").on("click","li",function () {
console.log($(this).text()); // 获取li标签里写好的值
alert(789);
})
// 要注意 on 前面是什么，以及on的参数
</script>
</body>
</html>
# 关于事件委派：
$("").on(eve,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
# 事件切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.test{
width: 200px;
height: 200px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
// 第一种方式
function enter(){
console.log("enter")
}
function out(){
console.log("out")
}
$(".test").hover(enter,out)
// 第二种方式
$(".test").mouseenter(function(){
console.log("enter")
});
$(".test").mouseleave(function(){
console.log("leave")
});
</script>
</html>
2.JQuery属性操作
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})
# attr 和 prop
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
<script>
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// false
// ---------手动选中的时候attr()获得到没有意义的undefined-----------
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// true
console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true
console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//checked
</script>
# 文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="c1">
<p>DIV-PPP</p>
</div>
<input type="text" id="inp" value="123">
<p class="p1" value="standby">PPP</p>
<script>
console.log($(".c1").html()); // <p>DIV-PPP</p>
console.log($(".c1").text()); // DIV-PPP
$(".c1").html("<b>LIU</b>"); // LIU
console.log($("#inp").val()); // 123
$("#inp").val(999);
console.log($("#inp").val()); // 999
// p标签没有value属性，是自己加的属性，用val()是获取不到的；可以用attr
console.log($(".p1").val());
// 设置CSS样式
$(".p1").css({"color":"red","fontSize":"35px"})
</script>
</body>
</html>
# JQuery重写 左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.item {
margin: 20px;/*上 下 左 右*/
}
.left_menu {
width: 20%;
height: 500px;
background-color: wheat;
float: left;
}
.title {
text-align: center;
background-color: #53e3a6;
line-height: 30px;
color: red;
}
.hidden {
display: none;
}
.content_menu {
width: 80%;
height: 500px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="left_menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<p>111</p>
<p>112</p>
<p>113</p>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hidden">
<p>211</p>
<p>212</p>
<p>213</p>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hidden">
<p>311</p>
<p>312</p>
<p>313</p>
</div>
</div>
</div>
<div class="content_menu"></div>
</div>
<script>
$(".title").click(function () {
// $(this).next().removeClass("hidden");
// $(this).parent().siblings().children(".con").addClass("hidden");
// JQuery 支持链式操作，所以上面两句可以简写为下面一句：
$(this).next().removeClass("hidden").parent().siblings().children(".con").addClass("hidden");
})
</script>
</body>
</html>
# JQuery 重写 表格全选、反选、取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<button>全选</button>
<button>反选</button>
<button>取消</button>
<table border="1">
<tr>
<th> </th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
$("button").click(function () {
if ("全选" == $(this).text())
{
$("input").prop("checked",true);
}
else if ("取消" == $(this).text())
{
$("input").prop("checked",false);
}
else
{
$("input").each(function () {
$(this).prop("checked",!$(this).prop("checked"));
})
}
})
</script>
</body>
</html>
# Jquery实现 tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer {
width: 60%;
height: 300px;
background-color: wheat;
margin: 100px auto;
}
.outer ul.title {
background: darkgrey;
padding: 10px;
}
.outer ul.title li {
display: inline-block;
list-style: none;
padding: 5px;
}
.hide {
display: none;
}
.outer .content {
padding: 20px;
}
.active {
background-color: red;
color: white;
border-top: 3px solid blue;
}
</style>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
<ul class="title">
<li class="active" relation="c1">商品介绍</li>
<li relation="c2">商品规格</li>
<li relation="c3">售后保障</li>
</ul>
<div class="content">
<div class="item" id="c1">这里是商品介绍</div>
<div class="item hide" id="c2">这里是商品规格</div>
<div class="item hide" id="c3">售后服务在这里</div>
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$(".title li").click(function () {
// 更改 title 的背景色
$(this).addClass("active");
$(this).siblings().removeClass("active");
// 更改title对应的content显示
// 通过在 li 标签里埋了一个自定义属性，对应到content里面id值
var $id_val = $(this).attr("relation");
var $sel = "#" + $id_val; // 拼接字符串
$($sel).removeClass(‘hide‘);
$($sel).siblings().addClass(‘hide‘);
})
</script>
</body>
</html>
3.JQuery each循环
<!--循环方式1: $.each(obj,func(){})-->
<script>
// JQuery遍历数组
var arr = [11,22,33,44];
$.each(arr,function (i,j) {
console.log(i); // 索引
console.log(j); // 值
// console.log(arr[i]); // 值
});
// JQuery遍历object
// 支持类似字典的数据类型，实际是object对象
var info = {"name":"egon","age":18,"gender":"male"};
$.each(info,function (i,j) {
console.log(i);
console.log(j);
})
</script>
<!--循环方式2: $("").each(func(){})-->
<body>
<p class="item">P1</p>
<p class="item">P2</p>
<p class="item">P3</p>
<p class="item">P4</p>
<script>
// JQuery遍历标签
$(".item").each(function () {
if ($(this).text()=="P3")
{
console.log($(this).text());
console.log($(this).html());
$(this).css({"color":"red","font-size":"20px"})
}
})
</script>
</body>
# each循环扩展
# 示例1
<script>
function f(){
for(var i=0;i<4;i++){
if (i==2){
return
}
console.log(i)
}
}
f(); // 输出 0 和 1
</script>
# 示例2
<script src="jquery-3.1.1.js"></script>
<script>
li=[11,22,33,44];
$.each(li,function(i,v){
if (v==33){
// return ; // 输出 11 22 44
// return true; // 输出 11 22 44
return false // 输出 11 22
}
console.log(v)
});
</script>
function里的return只是结束了当前的函数,并不会影响后面函数的执行；
如果你想return后下面循环函数继续执行,那么就直接写return或return true
如果你不想return后下面循环函数继续执行,那么就直接写return false
4.文档节点处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
# 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
width: 500px;
height: 300px;
background-color: wheat;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="outer">
<h4>hello node</h4>
</div>
<button class="add-node">ADD</button>
<button class="del-node">DEL</button>
<div class="box">
<p class="p1">PPP</p>
</div>
<div class="outerBox">
<div></div>
</div>
<script src="../jquery-3.1.1.js"></script>
<script>
$(".add-node").click(function () {
var $ele_p = $("<p>");
$ele_p.text("--->ppp");
// 添加子标签
$(".outer").append($ele_p);
// 等价于下面这种写法:
// $ele_p.appendTo(".outer");
// // 添加兄弟标签
// $(".outer").after($ele_p);
// 等价于下面这种写法:
// $ele_p.insertAfter(".outer");// 类似于appendTo()
//
// // 清空标签
// $(".box").empty();
//
// // 删除标签
// $(".box").remove();
//
// // 复制标签
// var $p1_clone = $(".p1").clone();
// $(".box").append($p1_clone);
})
</script>
</body>
</html>
# 节点clone示例
<body>
<div class="outer">
<div class="box">
<button class="add">+</button>
<input type="text" placeholder="请输入..." id="line">
</div>
</div>
<script>
$(".add").click(function () {
// var $new_box = $(".box").clone(); // 错误
var $new_box = $(this).parent().clone();
// $new_box.children("button").attr("class","to_remove");
// $new_box.children("button").html("-");
// 可以简写成下面这一句：
$new_box.children("button").html("-").attr("class","to_remove");
$(".outer").append($new_box);
});
// 这样写是不生效的，需要改成事件委派的形式
// $(".to_remove").click(function () {
// var $ele_del = $(this).parent();
// console.log($ele_del);
//// $ele_del.remove();
// })
// 事件委派 -> 解决新添加的标签事件绑定失败的问题
$(".outer").on("click",".to_remove",function () {
var $ele_del = $(this).parent();
console.log($ele_del);
$ele_del.remove();
})
</script>
</body>
5.动画效果
# 显示和隐藏
<body>
<p>hello egon</p>
<button id="hide_btn">隐藏</button>
<button id="show_btn">显示</button>
<button id="toggle_btn">Toggle</button>
<script src="jquery-3.1.1.js"></script>
<script>
$("#hide_btn").click(function () {
// $("p").hide();
// $("p").hide(1000);
// 添加回调函数
$("p").hide(1000,function () {
alert(123);
});
});
$("#show_btn").click(function () {
// $("p").show();
$("p").show(1000);
});
$("#toggle_btn").click(function () {
// $("p").toggle();
$("p").toggle(1000);
});
</script>
</body>
# 滑动滑出
<body>
<img src="tsl.jpg" class="tsl">
<button class="slide_out">滑出</button>
<button class="slide_in">滑出</button>
<button class="switch">切换</button>
<script src="jquery-3.1.1.js"></script>
<script>
$(".slide_out").click(function () {
$(".tsl").slideDown(1000); // 1000 ms 完成
})
$(".slide_in").click(function () {
$(".tsl").slideUp(1000);
})
$(".switch").click(function () {
$(".tsl").slideToggle(1000);
})
</script>
</body>
# 淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.item {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="item"></div>
<button class="fade_in">淡入</button>
<button class="fade_out">淡出</button>
<button class="fade_switch">切换</button>
<script>
$(".fade_in").click(function () {
$(".item").fadeIn(3000);
});
$(".fade_out").click(function () {
$(".item").fadeOut(3000);
});
$(".fade_switch").click(function () {
$(".item").fadeToggle(3000);
});
</script>
</body>
</html>
# CSS位置操作
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
# CSS尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
四、实用例子
五、day15课后作业
题目要求
代码实现
时间： 2024-10-19 14:44:41