JQuery库
JQuery库
目录
一、认识jquery
jQuery是用js编写的，里面封装了js常用的方法和属性
小公司应用广泛，大公司一般会自己开发相应的内容
手机端不适用
1. 引入
<script src="jquery-3.1.1.js"></script>
2. 基本语法
// $(selector).action()
$("p").css("color", "red").css("font-size", "10px")
二、选择器
1. 基本选择器
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")
2. 层级选择器
$(".outer div")
$("outer>div")
$("outer+div")
$("outer~div")
3. 基本筛选器
$("li:first") // To get the first li
$("li:last")
$("li:eq(2)") // To get the li whoes range is 2
$("li:even")
4. 属性选择器
$("[id='div1']")
$("[id='div1'][p]")
5. 表单选择器
$("[type='text']")
$(":text") // only in form tag
6. 过滤筛选器
$("li").eq(2)
$("li").first()
$("li").hasclass("test") // return the boolean
7. 查找筛选器
$(".div1").children(".text")
$(".div1").find()
$(".div1").next()
$(".div1").nextAll()
$(".div1").nextUntil()
$(".div1").prev()
$(".div1").prevAll()
$(".div1").prevUntil()
$(".div1").parent()
$(".div1").parents()
$(".div1").parentsUntil()
$(".div1").siblings()
三、属性选择
$(".div1").attr()
$(".div1").attr("attr", "value")
$(".div1").removeAttr("attr")
$(".div1").prop("attr", "value")
$(".div1").removeProp("attr")
$(".div1").addClass()
$(".div1").removeClass()
$(".div1").html()
$(".div1").text()
$(".div1").value()
$(".div1").val() // Get the value of the attribution of value or modify the value
四、for循环
li=[10,20,30]
dict={"gender": "male", "sex" :20}
$.each(dict, function(i,x){
console.log(i,x)
})
$("table tr").each(function(){
$(this)
})
五、操作文档
<div id="div1"></div>
<script>
var ele=$("p");
ele.appendTo($("#div1"));
ele.prependTo($("#div1"));
$("#div1").append(ele);
$("#div1").prepend(ele);
ele.after();
ele.insertAfter();
ele.before();
ele.insertBefore();
ele.clone();
ele.remove();
ele.empty(); //Empty the content of tag
六、绑定事件
$(document).ready(function(){}) // Execute a function when all tag are loaded
$("#div1").on(event, func1) // Bind a event
$("#div1").off(event, func1) // Eliminate a event
$("#div1").mouseover(function(){})
$("#div1").on("mouseover", function(event){}) // The argument of event include all informations of shifts of the mouse
七、实例方法
1. 显示、隐藏
$("p").show() // The argument can be filled by xx ms, which denote the time to complete the show's action
$("p").hide() // The time of hide
$("p").toggle() // Switch between the show and the hide
2. 淡入淡出
$("p").fadeIn();
$("p").fadeOut();
$("p").fadeToggle();
$("p").fadeTo(ms, opacity);
$("p").fadeIn(2000, function(){})
3. 滑动滑出
$("p").slideDown();
$("p").slideUp();
$("p").Toggle();
4. 扩展自定义方法
$.extend({
getMax:function(a,b){
return a<b?a:b // if a < b, return a,but b
}
})
// Give the function of extend a private region to store variables through the automatical operative function'statement
(function($){
$.fn.extend({
print:function(){
console.log($this.html);
}
})
})(jQuery)
$("p").print();
六、实例训练
1. 后台管理布局
return: Can end the loop but not end the function
jquery1.9+ can be compatible with the brousers of low version
提示代码
$("body").scrollTop() // Get the distance between scroll and the top of page
$("#div1").offset() // Get the distance between the tag and the top of page
$("#div1").height() // height-self
$("#div1").innerheight() // height-self+padding
$("#div1").outerheight() // Attribution|true: height-self+padding+border+margin; false: height-self+padding+border
$('#menu a[b='+a+']')
$(window).height()
$(docutment).height()
window.onscroll=funtion{} // Bind the event for window, And don't bind the event for Body tag, because certain browsers may not be to trigger the event
2. 拖动面板移动实例
提示代码
$("p").mousedown(funtion(event){
var star_x = event.screenX;
})
3. jidong轮播图
提示代码
优先级问题(css): 直接在标签写 > #id > .class > 标签名 ( #id=100 .class=10 标签名=1,example: .num li{}=11 )
$(this).index()
$(".img li").eq(index).stop()
$(".outer").hover(f1, f2) // The two arguments of the method can be filled by two functions; f1 execute when mouse hover above the tag, f2 execute when mouse leave the tag
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
padding:0;
}
.outer{
position: relative;
top: 20px;
left: 425px;
width: 590px;
}
.outer:hover .button{
display: block;
}
.outer .num{
margin-left: 200px;
margin-top: 430px;
z-index:101;
}
.outer .button{
/*background-color:red;*/
width: 100%;
margin-top: 230px;
display: none;
z-index:101;
}
.outer ul,div{
position: absolute;
top: 0;
left: 0;
}
.outer ul li{
list-style: none;
/*position: absolute;*/
}
.outer .img li{
position: absolute;
/*display: none;*/
}
.outer .img .first_img{
z-index: 100;
}
.outer .num li{
display: inline-block;
background-color: #aeaeae;
width: 20px;
text-align: center;
margin-left: 20px;
border-radius: 50%;
}
.outer .button li{
display: inline-block;
background-color: #aeaeae;
width: 25px;
height: 60px;
line-height: 60px;
text-align: center;
color:white;
/*z-index:101;*/
}
.outer .button .btn_left{
float: left;
}
.outer .button .btn_right{
float: right;
}
.current_time{
background-color: white!important;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li class="first_img">
<a href="#"><img src="q.jpg"></a>
</li>
<li>
<a href="#"><img src="q2.jpg"></a>
</li>
<li>
<a href="#"><img src="q3.jpg"></a>
</li>
<li>
<a href="#"><img src="q4.jpg"></a>
</li>
</ul>
<ul class="num">
<li class="current_time">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="button">
<li class="btn_left"> < </li>
<li class="btn_right"> > </li>
</ul>
</div>
<script src="jquery-3.6.0.js"></script>
<script>
// $(".outer").mouseover(function(){
// $(".outer .button").removeAttr("display","none")
// })
var i = 0;
function Timer(){
// i++;
if (i<3){
i+=1;
}else{
i=0;
}
$(".outer .num li").eq(i).addClass("current_time").siblings().removeClass("current_time");
$(".outer .img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut("500");
// console.log(i)
}
$(".outer .num li").mouseover(function(){
$(this).addClass("current_time").siblings().removeClass("current_time");
// alert($(this))
var img_index = $(this).index();
i = img_index;
$(".outer .img li").eq(img_index).stop().fadeIn(1000).siblings().stop().fadeOut("500");
})
$(".outer").hover(function (){
clearInterval(Timer_id);
},function (){
Timer_id = setInterval(Timer, 2000);
})
$(".outer .button .btn_left").mousedown(function(){
if (i>0){
i--;
}else{
i=3;
}
$(".outer .num li").eq(i).addClass("current_time").siblings().removeClass("current_time");
$(".outer .img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut("500");
})
$(".outer .button .btn_right").mousedown(function(){
if (i<3){
i++;
}else{
i=0;
}
$(".outer .num li").eq(i).addClass("current_time").siblings().removeClass("current_time");
$(".outer .img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut("500");
})
var Timer_id = setInterval(Timer, 2000);
</script>
</body>
</html>
