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>

JQuery库

上一篇:php怎么把字符转成大小写,php怎么把字符串转换为大小写


下一篇:js基础---键盘事件