前端基础JQuery
JQuery对象是通过JQquery包装DOM对象后产生的对象。JQuery对象是JQuery独有的。如果一个对象是JQuery对象，那么它就可以使用JQuery中的方法。
$("#test").html();
获取ID为test的元素内的html代码
DOM实现代码:document.getElementById("test").innerHTML;
虽然JQuery对象是DOM对象包装后产生的，但是JQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用JQuery中的方法
约定如果获取的是JQuery对象，那么要在变量前加$
var $variable=JQuery对象
var variable=DOM对象
$variable[0]:JQuery对象转为DOM对象
$("#test")[0].innerHTML;
选择器
基本选择器
$("*") 通配
$(#id") ID
$(".class") 类
$("element") 标签
$(".class,p,div") 多个元素
层级选择器
$(".outer div") .outer所有div后代
$(".outer>div") .outer所有子代div
$(".outer+div") .outer毗邻div标签
$(".outer~div") .outer普通兄弟div标签
基本选择器
$("li:first") li中的第一个元素
$("li:eq(2)") li中索引为2的元素
$("li:even") li中索引为偶数的元素
$("li:gt(1)") li中索引大于1的元素
$("li:lt(3)") li中索引小于2的元素
$("li:odd") li中索引为奇数的元素
属性选择器
$('[id="div1"]') id为div1的元素
$('[xiaobai="handsome"][id]') xiaobai属性为handsome且有id属性的标签
表单选择器
只适用于input标签
$('[type="text"]')=>$(":text")
筛选器
过滤选择器
$("li").eq(2)
$("li").first()
$("ul li").hasClass("test")
查找筛选器
查找子标签： $("div").children(".test") 查找div中所有类名为test的子元素
$("div").find(".test") 查找div中所有类名为test的后代标签
向下查找兄弟标签：$(".test").next() 类名为test的下一个兄弟元素
$(".test").nextAll() 类名为test以后的所有兄弟元素
$(".test").nextUntil() 类名为test以后的某条件之前的元素，不包含末元
素
向上查找兄弟标签：$(".test").prev() 类名为test的之前的一个兄弟元素
$(".test").prevAll()
$(".test").prevUntil()
查找所有兄弟标签：$(".test").siblings()
查找父标签： $(".test").parent()
$(".test").parents()
$(".test").parentUntil()
Filter
<div class="grandpa">
<div class="pa">
<div class="child not-gay"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(".child").filter(".not-gay").css("border","solid 2px yellow");
</script>
//==============
$(".child").filter(".not-gay").css({"border":"solid 2px yellow","margin-left":"5px"}); 添加多种样式
事件
页面载入
ready(fn) $(document).ready(function(){})=>$(function(){}) //当DOM载入完成后再进行此代码的执行
事件绑定
$(".add").click(function () {
$(".box").append('<li class="item">666</li>')
}). //语法：标签对象.事件(函数)
事件委派
<ul class="box">
<li class="item">111</li>
<li class="item">222</li>
<li class="item">333</li>
<li class="item">444</li>
<li class="item">555</li>
</ul>
<button class="add">add</button>
<button class="off">off</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(".box").on("click",".item",function () {
alert(123);
});
$(".add").click(function () {
$(".box").append('<li class="item">666</li>')
}).
$("off").click(function () {
$(".box").off("click");
});
</script>
事件切换
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
格式：$("").hover(fnover(){},fnout(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.container{
border:1px solid red;
width:790px;
height:340px;
margin:100px auto;
position:relative;
}
ul{
list-style: none;
}
.page{
position:absolute;
top:290px;
left:290px;
}
.page li{
height:20px;
width:20px;
border-radius: 10px;
display:inline-block;
background-color: white;
}
.page .active{
background-color: red;
}
.hide{
display: none;
}
.left,.right{
background-color: lightgray;
text-align: center;
width:30px;
height:50px;
position:absolute;
opacity: 0.5;
line-height: 50px;
display:none;
font-size:30px;
}
.left{
top:150px;
left:0;
}
.right{
right:0;
top:150px;
}
.container:hover .btn{
display:block;
}
</style>
</head>
<body>
<div class="container">
<ul class="good_img">
<li><img src="mat1.jpg" alt=""></li>
<li class="hide"><img src="mat2.jpg" alt=""></li>
<li class="hide"><img src="mat3.jpg" alt=""></li>
<li class="hide"><img src="mat4.jpg" alt=""></li>
<li class="hide"><img src="mat5.jpg" alt=""></li>
<li class="hide"><img src="mat6.jpg" alt=""></li>
<li class="hide"><img src="mat7.jpg" alt=""></li>
<li class="hide"><img src="mat8.jpg" alt=""></li>
</ul>
<ul class="page">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="btn left"> < </div>
<div class="btn right"> > </div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
var i=0;
$(".page li").mouseover(function () {
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".good_img li").eq(i).removeClass("hide").siblings().addClass("hide");
});
function loop_img(){
if (i==7){
i=0;
}
i++;
$(".good_img li").eq(i).removeClass("hide").siblings().addClass("hide");
$(".page li").eq(i).addClass("active").siblings().removeClass("active");
}
$(".right").click(function () {
loop_img()
});
$(".left").click(function () {
if(i==0){
i=7
}
i--;
$(".good_img li").eq(i).removeClass("hide").siblings().addClass("hide");
$(".page li").eq(i).addClass("active").siblings().removeClass("active");
});
ID=setInterval(loop_img,1000);
$(".container").hover(function () {
clearInterval(ID)
},function () {
ID=setInterval(loop_img,1000);
})
</script>
</body>
</html>
属性操作
--------------------------CSS类 $("").addClass(class|fn) $("").removeClass([class|fn]) --------------------------属性 $("").attr(); //括号中写入属性可以获得属性的值，写入属性和值可以改变相应属性的值 $("").removeAttr(); $("").prop(); $("").removeProp();
//对于HTML元素本身的固有属性，在处理时，使用prop方法
//对于HTML元素我们自己定义的DOM属性，在处理时，使用attr方法
//像checkbox,radio和select这样的元素，选中属性对应的"checked"和"selected"，这些固有属性需要使用prp方法才能获得正确的结果 --------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) --------------------------- $("#c1").css({"color":"red","fontSize":"35px"})
each循环
我们使用Jquery获取的是一个集合对象，是将所有的操作加到集合中的所有元素；但对于选中标签进行不同处理，这个时候就需要对所有元素进行循环遍历。
方式一：
格式：$.each(obj,fn) arr=["xiaobai","xiaohei","xiaohong","xiaozi"]; $.each(arr,function (i,v) { //第一个参数i为索引，第二个参数v为值 if(v=="xiaohei"){ return false; //return后加false会退出所有循环相当于break,除false外则退出当前 } //当前循环相当于continue console.log(v); //xiaobai,xiaohong,xiaozi });
// if(v=="xiaohei"){
// return ;
// }
// console.log(v); // xiaobai
// });
方式二：
格式：$("").each(function(){})
$("tr").each(function(){
console.log($(this).html())
})
文档节点处理
//创建一个标签对象 $("<标签名>") $("<p>") //内部插入 $("").append(content|fn) ------>$(".test").append("<b>hello</b>"); $("").appendTo(content|fn) ------>$("<b>hello</b>").appendTo(".test"); $("").prepend(content|fn) ------>$("<b>hello</b>").prepend(".test"); $("").prepend(content|fn) ------>$(".test").prepend(<b>hello</b>");// 在.test首位添加b标签 $("<b>hello</b>").prependTo(".test"); //外部插入 $("").after(content|fn) ------>$(".test").after("<b>hello</b>");//在.test 后添加b标签 $("").before(content|fn) ------>$(".test").before("<b>hello</b>"); $("").insertAfter(content) ------>$("<b>hello</b>").insertAfter(".test");/在.test 后添加b标签 $("").insertBefore(content) ------>$("<b>hello</b>").insertBefore(".test"); //删除 $("").empty() //删除标签中的所有内容，但是保留标签本身 $("").remove() //删除标签本身 //复制 $("").clone([Even[,deepEven]])
动画效果
显示和隐藏
<img src="http://i2.hdslb.com/bfs/archive/2115586ec430d1472962f1742bf39e67b32cefb5.jpg" alt=""> <button class="show">show</button> <button class="hide">hide</button> <button class="toggle">toggle</button> <script src="jquery-3.2.1.js"></script> <script> $(".show").click(function () { $("img").show(); }); $(".hide").click(function () { $("img").hide(); }); $(".toggle").click(function () { $("img").toggle(1000); })
滑动
<img src="http://i2.hdslb.com/bfs/archive/2115586ec430d1472962f1742bf39e67b32cefb5.jpg" alt=""> <button class="slideup">slideup</button> <button class="slidedown">slidedown</button> <button class="slidetoggle">slidetoggle</button> <script src="jquery-3.2.1.js"></script> <script> $(".slideup").click(function () { $("img").slideUp(); }); $(".slidedown").click(function () { $("img").slideDown(); }); $(".slidetoggle").click(function () { $("img").slideToggle(1000); })
淡入淡出
<img src="http://i2.hdslb.com/bfs/archive/2115586ec430d1472962f1742bf39e67b32cefb5.jpg" alt=""> <button class="fadein">fadein</button> <button class="fadeout">fadeout</button> <button class="fadetoggle">fadetoggle</button> <button class="fadeto">fadeto</button> <script src="jquery-3.2.1.js"></script> <script> $(".fadein").click(function () { $("img").fadeIn(1000); }); $(".fadeout").click(function () { $("img").fadeOut(1000); }); $(".fadetoggle").click(function () { $("img").fadeToggle(1000); }); $(".fadeto").click(function () { $("img").fadeTo(1000,0.4); })
CSS操作
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
offset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.move_div{
background-color: #7CD0FF;
height:200px;
width:200px;
}
</style>
</head>
<body>
<div class="move_div"></div>
<script src="jquery-3.2.1.js"></script>
<script>
var mouse_x=0,mouse_y=0;
$(".move_div").mousedown(function (e) {
mouse_x=e.clientX;
mouse_y=e.clientY;
var origin_x=$(this).offset().left;
var origin_y=$(this).offset().top;
$(document).mousemove(function (e) {
var new_x=e.clientX;
var new_y=e.clientY;
$(".move_div").offset({top:origin_y+new_y-mouse_y,left:origin_x+new_x-mouse_x})
});
$(document).mouseup(function () {
$(document).off();
})
});
</script>
</body>
</html>
scrollTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width: 100%;
height:2000px;
background-color: #00a1d6;
}
.back{
width:70px;
height: 50px;
text-align: center;
line-height: 50px;
position:fixed;
bottom:20px;
right:20px;
color:white;
background-color: #7EFF67;
display: none;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="back">TOP</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(window).scroll(function () {
if($(window).scrollTop()>200){
$(".back").show()
}else{
$(".back").hide()
}
});
$(".back").click(function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.higher{
height:200px;
width:200px;
background-color: #00a1d6;
}
/*.lower{*/
/*position: relative;*/
/*}*/
.inner{
height:300px;
width:300px;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="higher"></div>
<div class="lower">
<div class="inner"></div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
console.log($(".inner").position().top);
console.log($(".inner").position().left);
</script>
</body>
</html>
