jQuery学习笔记

最新推荐文章于 2022-11-01 13:18:10 发布

浮生醉清风i

最新推荐文章于 2022-11-01 13:18:10 发布

阅读量204

点赞数 1

分类专栏： Front end 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_41678001/article/details/88029027

版权

Front end 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery的核心 “$” ,代表了jQuery对象，两者是等价的。

基本语法： $(selector).action() 选择器 + 操作

一、选择器

1、基本选择器：

$("#id")  选择 id=id 的标签
$(".ip")  选择 class=id 标签
$("*")    选择全部标签

2、层级选择器：

$(".pp div")  后代选择器  选择 class=pp 标签下(包括儿子和孙子)的div标签
$(".pp>div")  子代选择器  选择 class=pp 标签下(只包括子代)的div标签
$(".pp+div")  向下查找紧挨的div    不常用  
$(".pp~div")  向下找 div标签 可以不仅挨着  不常用

3、基本筛选器：

$("li:first")  拿到第一个li标签 
$("li:last")   拿到最后一个li标签 
$("li:eq(2)")  拿到第三个li标签    
$("li:gt(2)") 从第三个位置后开始，拿到当前位置之后的所有标签
$("li:lt(2)") 从第三个位置前开始，拿到当前位置之前的所有标签

还有另外一种姿势：

$("li:eq(2)")  等同于  $("li").eq(2)-----|      
$("li:first")  等同于  $("li").first()--------->  推荐用后面这三种
$("li:last")   等同于  $("li").last()----|

4、属性选择器：

$("[p='title']").css("color","red")

当选择input标签时，更简便的方法

 $(":text")     代表选择type=text的框

5、查找筛选器

$(".out").children("p").css("color","red")  找到class=out的子代所有的p标签

$(".out").find("p").css("color","red")  找所有class=out的后代所有的p标签

$(".out").next()  找所有class=out的下面的一个标签

$(".out").nextAll() 找所有class=out的下面的全部标签

$(".out").nextUntil("#id") 找所有class=out的下面的全部标签,直到找到#id停止 ,不包括#id

$(".out").pre()  找所有class=out的前面的一个标签

$(".out").preAll()   找所有class=out的前面的全部标签

$(".out").preUntil("#id")  找所有class=out的前面的全部标签，直到找到#id停止

$(".out").parent()   找class=out的父级 

$(".out").parents()   找class=out的父级,会一直向上找，一直到最外层。全局都会改变

$(".out").prarentsUntil("#id")  找class=out的父级,会一直向上找,直到找到#id停止

$("out").siblings()  找class=out的兄弟标签

6、属性查找器：

$(" ").hasclass("name")  判断是否有这个类名，返回一个Boolean值

$(" ").attr("name")   获得该标签的name属性的值，也可以获取自定义的属性值

$(" ").prop("name"，"alex")   将当前标签的name属性值改成alex。

$(" ").addClass("name")  给当前标签增加类名

$(" ").removeClass("name")  给当前标签删除类名

其实还有更多的用法，但是会存在一定的bug，所以不推荐使用。但是具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

$(" ").prop("name")   获得name属性的值  只能获取到固有属性

$(" ").attr("name","alex")  当前标签的name属性值改成alex，这个方法不好

7、循环：

第一种方式 : 通过调用 $ 的each()方法。

var arr = [1,2,3,4,5,6]
$.each(arr,function(x,y){
    console.log(x);  // 打印的是index
    console.log(y);  // 打印的是信息(也就是数组的内容)
})

第二种方式: $(" ").each()，推荐用这种方式。

$("p").each(function(){
    console.log(this);  // 打印的是标签
    console.log($(this));  // 打印的是jQuery的标签对象
})

※：jQuery对象转换DOM对象的方法：加上一个"[ 0 ]" 就转换成功。

var $like =jq;
var like=js;
console.log($like[0]) // 打印转换的对象

※：如果在循环中使用了return只会使当前次循环结束，并不影响所有的循环

function init() {
   $.each(list,function (k,v) {
      if(v==4){
         return true  // 不影响后面的循环
      }
      console.log(v)
   });
  console.log("循环结束")
}

8、属性操作：

$(" ").html() 和DOM对象的innerHTML()方法一样，当有参数时，例如<h1>111<h1>就是替换div的内容。

$(" ").text() 和DOM对象的innerText()方法一样，有参数时,例如111就是替换div的内容，替换了所有

$(" ").val()  获取值，只能获取固有的属性的value值，如果有参数相当于赋值给当前对象

$(" ").css("color","red")  设置样式值，属性名和属性值

9、文档处理：

(1):内部插入：在一个元素里面进行插入.

$(" ").append("<h1>hello</h1>")   在标签后面添加一个文本

$("<h1>hello</h1>").appendto("div")    在标签后面添加一个文本，颠倒了主谓。

$(" ").prepend("<h1>hello</h1>")   在标签前面添加一个文本

$("<h1>hello</h1>").prependto(" ")  在标签前面添加一个文本 ，颠倒了主谓。

(2)外部插入：在一个元素外面进行插入。

var $ele = $("<h1></h1>");   // 创建一个h1标签
ele.text("hello");

$(" ").after("<h1>hello</h1>")  在当前标签(.div1)的下面进行插入

ele.insertafter($(" "))   在当前标签的下面进行插入，颠倒了主谓

$(" ").before("<h1>hello</h1>")   在当前标签的上面进行插入

ele.insertbefore(" ")   在当前标签的上面进行插入，颠倒了主谓

(3)删除、替换

$(" ").replaceWith(msg)  当前标签的内容被替换

$(" ").empty()  标签内容被清空，标签还在

$(" ").remove()    标签内容被清空，把标签顺便也删了

$(" ").clone()  复制当前该标签, 当参数值为true时，代表不会复制绑定的事件，只有文本的空标签。

10、事件绑定：这些方式绑定事件，当出现新的元素时，并不会为其绑定事件。

$(" ").bind("click",function(){...})    给某个标签绑定事件。

$(" ").click(function(){...})  上面绑定事件的简写方式。

$(" ").unbind("click")   给某个标签解除绑定事件。

11、事件委托函数：当出现新的元素时，为其绑定事件。

$("ul").on("click","li",function(){...})   为所有(包括刚创建的)li标签添加click事件。

delegate 和 on的参数位置不一样。

$("ul").delegate('绑定标签'，"动作"，function（）{})

当动态创建标签记得看看有没有少加属性。

12、页面载入

$(document).ready(function(){...})  等同于调用了  Windows.onload()
	
$(function(){...})   上面的简写形式

13、动画效果:

(1)、显示隐藏

$(" ").hide()   隐藏,加参数代表毫秒

$(" ").show()   显示,加参数代表毫秒

$(" ").toggle()  切换隐藏和显示,加参数代表毫秒

(2)、上下滑动画出:

$(" ").slideToggle()  切换状态

$(" ").slideUp()   向上滑出
    
$(" ").slideDown()  向下滑出

(3)、淡入淡出：

$(" ").fadeToggle(2000)   状态切换

$(" ").fadeOut(2000)   淡出

$(" ").fadeIn(2000)    淡入

$(" ").fadeTo(1000,0.4)   颜色变浅到设定的透明度(0.4)

(4)、回调函数

function toggle() {
        $(".shade").fadeToggle(2000,function () {
            console.log("time")   //  此函数为回调函数，经过2秒以后打印"time"
        })
    }

14、CSS效果

offset 标签相对于视图窗口的偏移量 

$(" ").offset().top()  距离上方的偏移量

$(" ").offset().left()  距离左边的偏移量

postion:相对于已定位的父标签的偏移量  

$(" ").postion().top()  距离上方的偏移量

$(" ").postion().left()  距离左边的偏移量

滚动事件

$(" ").scrollTop()   监听上下滚动的距离 必须放在监听事件里

$(" ").scrollLeft()  监听左右滚动的距离   

window.onscroll=function(){}  监听窗口的scroll

也可以监听局部的滚动   $(" ").scroll

返回顶部,就是给对象设置scrollTop(0)

通过滚动的距离显示返回顶部的标签：

window.onscroll = function () {
        console.log($(window).scrollTop());
        if($(window).scrollTop()>200){
            $(".ret").removeClass("hide")  //  移除class，显示标签
        }else {  // if($(window).scrollTop()<100)
            $(".ret").addClass("hide")  //  添加class，隐藏标签
        } 
    }

对CSS属性的操作

$(" ").height()  当前标签的高

$(" ").width()   当前标签的宽  内容区域的高度和宽度

$(" ").innerHeight()   当前标签的高 包括了padding

$(" ").innerWidths()   当前标签的宽 包括了padding不包括padding

$(" ").outerHeight()   当前标签的高

$(" ").outerWidth()    当前标签的宽 包括了border、padding,   

$(" ").outerheight(true)  当前标签的高 包括了border、padding、margin  true  表示考虑到外边界margin

15、filter函数和not函数

filter() 方法返回符合一定条件的元素，而not() 方法返回不符合一定条件的元素。这两个函数是相对的。

$("#table").filter(".into")   // 过滤#table下面的.into的元素
$("#table").not(".into")   // 过滤#table下面非.into的元素

16、扩展方法(插件机制)

jQuery写插件的两个核心方法：

$.extend({ min:function(){...}, 
           max:function(){...} })  添加静态方法,多个静态方法用","隔开，用"$"直接调用,为jQuery添加新的方法,例如$.min()


$.fn.extend({ min:function(){...}, 
              max:function(){...} })   为实例添加方法，多个方法用","隔开，用jQuery对象直接调用，例如$("div").min()

17、轮播图示例

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="outer">
    <div class="change">
        <ul>
            <li><a href="#"><img src="img/seventh.jpg"></a></li>
            <li><a href="#"><img src="img/sixth.jpg"></a></li>
            <li><a href="#"><img src="img/fifth.jpg"></a></li>
            <li><a href="#"><img src="img/fourth.jpg"></a></li>
            <li><a href="#"><img src="img/third.jpg"></a></li>
            <li><a href="#"><img src="img/second.jpg"></a></li>
            <li><a href="#"><img src="img/first.jpg"></a></li>
        </ul>
    </div>
    <span class="left"><</span>    //左右按钮
    <span class="right">></span>
    <div class="box">             // 轮播图的点
        <ul></ul>
    </div>
</div>
</body>
  
</html>

CSS部分：

<style type="text/css">
        .outer{
            width: 700px;
            height: 400px;
            position: absolute;
            top:150px;
            left: 400px;
        }
        span{
            display: inline-block;
            width: 20px;
            height: 60px;
            background-color: lightgray;
            color: white;
            line-height: 60px;
            text-align: center;
        }
        .left{
            position: absolute;
            top:150px;
        }
        .right{
            position: absolute;
            top: 150px;
            left: 680px;
        }
        .box{
            position: absolute;
            top:300px;
            left: 220px;
            background-color: lightgray;
            width: 250px;
            height: 15px;
            border-radius: 25px;
        }
        .box li{
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: white;
            position: relative;
            top: -20px;
            margin-left: 9px;
            border-radius: 25px;
        }
        .change{
            width: 100%;
            height: 100%;
        }
        .change ul li{
            display: inline-block;
            list-style: none;
        }
        .change ul li img{
            width: 700px;
            height: 400px;
            position: absolute;
            top:0;
            left: 0;
        }
        .active{background-color: red!important;}  // 鼠标悬浮颜色变红
    </style>

JS部分：

<script>
    var sum=0;
    // 核心思路：一个出现，其他的都消失
    // 循环创建li标签，写活
    var $img_len = $(".change img").length;
    for(var i=0;i<$img_len;i++){
    // 添加标签时不能循环添加一个相同的对象  $(".box ul").append($ele)不行，but下面的就可以，why？
        $(".box ul").append($("<li></li>").css("font-size","1px").css("text-align","center").css("line-height","10px"));
    }
    $(".box ul li").eq(0).addClass("active");
    $(".box ul li").mouseover(function () {
        sum = $(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        // 不能跳级写,  stop 在动作之前停止
        $(".change ul li").eq(sum).stop().show(1000).siblings().stop().hide(1000);
    });


    clock = setInterval(go_r, 1000);

    function go_r() {
        sum++;
        $(".box ul li").eq(sum%7).addClass("active").siblings().removeClass("active");
        $(".change ul li").eq(sum%7).stop().show(1000).siblings().stop().hide(1000);
    }
    
    function go_l() {
        sum--;
        $(".box ul li").eq(sum%7).addClass("active").siblings().removeClass("active");
        $(".change ul li").eq(sum%7).stop().show(1000).siblings().stop().hide(1000);

    }
    // 两个函数，一个是悬浮的函数，一个是离开的函数
    $(".outer").hover(come,leave);
    function come() {
        clearInterval(clock)
    }
    function leave() {
        clock = setInterval(go_r, 1000);
    }

    $(".right").bind("click",go_r);   //  每点击一下，调用一个函数，聪明
    
    $(".left").click(go_l);
</script>