jQuery

目录

• jQuery简述
• jQuery对象
• 选择器和筛选器
  • 选择器
  • 筛选器
• 操作元素
  • 属性操作
  • 文档操作(节点插入)
  • css操作
• jquery循环
• 动画效果
  • 显示／隐藏
  • 滑动效果
  • 淡入淡出
  • 回调函数
• 事件
  • 事件处理
  • 事件切换
  • 载入
• 插件机制
• 轮播图

jQuery简述

实现同一功能，不同写法：

js写法：document.getElementbyId("id")

jquery写法：$("#id")

jquery与js：

jQuery是Javascript的一个框架，不仅是兼容CSS3，同时兼容各种浏览器

jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法。
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

jquery基本语法： $(selector).action()

var $variable = jQuery 对象  //声明jQuery对象约定俗成在对像前增加$
	
var variable = DOM 对象 //js对象
	
$variable[0]  //表示将jQuery对象转换为DOM对象

$("#id").html();

$("#id")[0].innerHTML;  //转换为DOM对象就可以调用DOM方法

选择器和筛选器

选择器

1.基本选择器

$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")  //多元素选择，逗号分隔

2.层级选择器

$(".out div")  //后代选择
$(".out>div")  //子代选择
$(".out+div")  //毗邻选择，向下紧挨的p被选择
$(".out~div")  //兄弟选择

3.基本筛选器

$("li:first")  //index第一个元素
$("li:last")  //index最后一个元素
$("li:eq(n)")  //index第n个元素
$("li:even")  //选取每个带有偶数 index 值的元素
$("li:odd")  //选取每个带有基数 index 值的元素
$("li:gt(n)")  //选取每个index大于n的元素
$("li:lt(n)")  //选取每个index小于n的元素

4.属性选择器

$("[id = 'sb']")  //固有属性
$("[alex = 'sb'][class = 'mb']")  //自定义属性,多属性选取

5.表单选择器

$("[type='text']") 
$(":text")  //适用于input标签

筛选器

1.过滤选择器

$("li").eq(2)
$("li").first()
$("ul li").hasclass("test")  //无序列表ul下的li，有class为test的元素

2.查找选择器

$("div").children(".test")  //div子代元素带有class为test的元素
$("div").find(".test") //div后代元素带有class为test的元素

.find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。

$(".test").next()  //筛选每个匹配元素之后紧邻的同辈元素
$(".text").nextAll()  //筛选每个匹配元素之后全部同辈元素
#(".test").nextUntil(".test")  //查找跟随calss为test的同胞元素，直到下一个calss为test的元素

$("div").prev()  //筛选每个匹配元素之前紧邻的同辈元素
$("div").prevAll()  
$("div").prevUntil() 

$(".test").parent()  //class为test的元素的父元素
$(".test").parents()  //获得当前匹配元素集合中每个元素的祖先元素
$(".test").parentUntil()  //获得当前匹配元素集合中每个元素的祖先元素，直到。。。

$("div").siblings()  //获得匹配集合中每个元素的同胞

操作元素

属性操作

属性：

$().attr();  //操作自定义属性
$().removeAttr();
$().prop();  //操作固有属性，prop("属性名")表述取值，prop("属性名"，属性值)表述赋值
$().removeProp();

class：

$().addClass(class|fn)
$().removeClass([class|fn])

HTML代码／文本／值

$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])   //input标签的text、checkbox、button，必须是固有属性，才能取value

css

$().css("color","red")

文档操作(节点插入)

创建标签

$("<p>")

内部插入

append  //插入标签
appendto  //插入到标签
prepend
prependto

外部插入

after  //同级后插入
before  //同级前插入

替换

replaceWith

删除

empty //清空标签内容
remove //删除标签

克隆

clone()

css操作

CSS ： 设置HTML的CSS样式

	$().css(name|pro|[,val|fn])

位置
偏移量：$("").offset([coordinates])

var $p_offset = $(".p1").offset();  //偏移量对象
var $left = $p_offset.left; //获取距左边距离px
var $top = $p_offset.top;  //获取剧顶部距离px

$(".p1").offset({left: 100, top: 200});  //重新设置偏移对象的left，top偏移距离

position偏移：$("").position()

<div class="t1"></div>
<div class="box1" style="position: relative">
    <div class="box2">

    </div>
</div>
<p class="p2"></p>

<script src="jquery-3.2.1.js"></script>
<script>
    var $p_position = $(".box2").position();  //相对于父元素的偏移量

    var $left = $p_position.left;
    var $top = $p_position.top;

    $(".p2").text("the left:" + $left + "the top:" + $top);

</script>

滚动条px位置:

$("").scrollTop([val])、
$("").scrollLeft([val])

//返回页面顶部
<script>
    $(".top").click(function () {
        $(window).scrollTop(0);
    })
//    //js
//    document.onscroll = function () {
//        if ($(window).scrollTop()>200){
//            $(".top").show();
//        }else {
//            $(".top").hide();
//        }
//    }

    //jquery
    $(window).scroll(function () {
        if ($(window).scrollTop()>200){
            $(".top").show();
        }else {
            $(".top").hide();
        }
    })
</script>

尺寸

$("").height([val|fn])  //内容高
$("").width([val|fn])  //内容宽
$("").innerHeight()  //内容+padding
$("").innerWidth()  //内容+padding
$("").outerHeight([soptions]) //内容+padding+broder 
$("").outerWidth([options]) //内容+padding+broder

outerHeight(true)  //内容+padding+broder+margin

jquery循环

//方式1
arr = [123,456,"hello"]
obj = ["name":"alex","age":22]
$.each(arr,function(i,j){
	//i索引
	//j值
})
$.each(obj,function(i,j){
	//i键
	//j值
})

//方式2
$("ul li").each(function(){
	if ($(this).hasClass("item")){
		//遍历得到li中class为item的元素
	}
})

动画效果

显示／隐藏

show
hide
toggle

滑动效果

slideDown
slideUp
slideToggle

淡入淡出

fadeIn
fadeOut
fadeToggle
fadeTo

回调函数

当某一个动作执行完成之后，自动触发的函数

$("#show").click(function(){
	$("img").show(1000,function(){
		alert("回调函数")；
	})；
})；

事件

事件处理

on（events,[selector],[data],fn）
.on方法为动态添加的元素也能绑上指定事件

$('ul li').on('click', function(){console.log('click');})

事件切换

hover([over,]over)
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数

载入

ready(fn)  //类似js中的window.onload = function(){}，当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

$(document).ready(function(){})
//简写
$(function(){})

插件机制

$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .rotation {
            margin: 20px auto;
             730px;
            height: 336px;
            border: 1px solid black;
            position: relative;
        }

        .image-box {
            list-style: none;
        }

        .image-box li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .point-bar {
            list-style: none;
            position: absolute;
            bottom: 0;
            left: 200px;
            background-color: hsla(0, 0%, 100%, .3);
            border-radius: 12px;
        }

        .point-bar li {
            display: inline-block;
             12px;
            height: 12px;
            border-radius: 100%;
            background-color: #fff;
            margin-right: 14px;
        }

        .buttons .btn {
            position: absolute;
            margin-top: -50px;
            top: 50%;
             40px;
            height: 100px;
            background-color: #b4b4b4;
            opacity: 0.5;
            color: white;
            line-height: 100px;
            text-align: center;
            display: none;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        .point-bar .active {
            background-color: #cc0000;
            opacity: 0.8;
        }

    </style>
</head>
<body>
<div class="rotation">
    <ul class="image-box">
        <li style="display: inline-block"><a><img
                src="http://p4.music.126.net/MD1Rxeu4O21KQ9SBgx0EBQ==/18880813672319248.jpg">
        </a></li>
        <li><a><img
                src="http://p3.music.126.net/JK8RyycpXfk4-lm7Q_4t-g==/18760966906664678.jpg"></a></li>
        <li><a><img
                src="http://p3.music.126.net/PISYq4PazfIgC9W0mylJag==/19082024300201561.jpg"></a></li>
        <li><a><img
                src="http://p4.music.126.net/eo5HXwCHTAJLB4lbyw2b3A==/19082024300201562.jpg"></a></li>
        <li><a><img
                src="http://p4.music.126.net/J0DSsHZ77hvYToqX2iWEQA==/18992963858350072.jpg"></a></li>
        <li><a><img
                src="http://p4.music.126.net/sjeFlnGonRNfSrx6vehk-w==/18614731860189474.jpg"></a></li>
        <li><a><img
                src="http://p3.music.126.net/whwudcQ5KYYUwR-VVLj22Q==/18866520021161174.jpg"></a></li>
        <li><a><img
                src="http://p4.music.126.net/1EZqWQYmxlzRU3iAJo-_Qw==/18660911348461171.jpg"></a></li>
    </ul>
    <ul class="point-bar">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="buttons">
        <div class="left btn"> <</div>
        <div class="right btn"> ></div>
    </div>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
    var i = 0;
    var l = $(".image-box li").length;
    function go_on() {
        i++;
        $(".image-box li").eq(i).fadeIn(200).siblings().fadeOut(200);
        $(".point-bar li").eq(i).addClass("active").siblings().removeClass("active");
        if (i == l - 1) {
            i = -1;
        }
//        console.log(i);
    }
    var timer = setInterval(go_on, 1000);

    function go_back() {
        i--;
        $(".image-box li").eq(i).fadeIn(200).siblings().fadeOut(200);
        $(".point-bar li").eq(i).addClass("active").siblings().removeClass("active");
        if (i == -1) {
            i = l-1;
        }
//        console.log(i);
    }

    $(".rotation").hover(function () {
        $(".buttons .btn").show();
        clearInterval(timer);
    }, function () {
        $(".buttons .btn").hide();
        timer = setInterval(go_on, 1000);
    });

    $(".point-bar li").mouseover(function () {
        i = $(this).index();
        $(".image-box li").eq(i).fadeIn(200).siblings().fadeOut(200);
        $(".point-bar li").eq(i).addClass("active").siblings().removeClass("active");
    })

    $(".right").click(go_on);

    $(".left").click(go_back);

</script>
</html>