jQuery初识

3周前 (09-29) 140次浏览 已收录 0个评论

概念

jQuery是一个快速、简洁的js库,它是把原生js中的dom操作做了封装,以达到快速查询使用里面的功能。

学习jQuery的本质就是学习调用函数(方法)

由于以下部分举例已经在JS篇写过了,所以本篇文章不再有案例展示

入口函数

<div></div>
<script>
            // 举例 隐藏元素hide方法
            // 等页面dom加载完毕再去执行js代码
            $(function(){ //入口函数
                $('div').hide(); //首先把div包装成jQuery对象,然后只能调用jq的方法
            })
    </script>

jQuery与DOM的转换

<div></div>
    <script>
            // DOM对象转换为jQuery对象
            var divt=document.querySelector('div');
            $(divt).方法(); //可以使用dom里的方法
            
            // jQuery转换为DOM对象
            $('div')[0].方法(); //也是使用dom里的方法
    </script>

选择器

jq基础选择器

层级选择器

筛选选择器

筛选方法(重点)

jq得到当前元素索引号 $(this).index();

查找父级

$(".类名").parents(".类名2") //查找类名的所有父级中的类名2的父级

隐式迭代

遍历内部DOM元素(伪数组形式存储),就是把匹配的所有元素内部进行遍历循环,给每一个元素添加css这个方法(对元素进行相同的操作)

排他思想

<script>
            //隐式迭代,给所有的按钮都绑定了点击事件
            $("button").click(function(){
                //当前的元素变化背景颜色
                $(this).css("background","red");
                //其余的兄弟去掉背景颜色(隐式迭代实现了排他思想)
                $(this).siblings("button").css("background","");
            })
    </script>

链式编程

<script>
            //隐式迭代,给所有的按钮都绑定了点击事件
            $("button").click(function(){
                //当前的元素变化背景颜色
                $(this).css("background","red");
                //其余的兄弟去掉背景颜色(隐式迭代实现了排他思想)
                $(this).siblings("button").css("background","");
                
                //链式编程
                //我的颜色为红色,我的兄弟的颜色为空
                $(this).css("background","red").siblings().css("background","");
            })
    </script>

样式操作

返回属性值

$(this).css("color");

修改样式

$('div').css({
            width:400,
            color:"red"
        });

设置类样式操作

添加类(追加)

$("div").addClass("类名"); //类名不用写点.

移除类

$("div").removeClass("类名");

切换类

$("div").toggleClass("类名"); //有其就移除,无就添加

案例

<script src="https://demo.wangxuelong.vip/js/jquery/jquery.min.js"></script>
    <script>
        $(function() {
            // 1.点击上面的li,当前li 添加current类,其余兄弟移除类
            $(".tab_list li").click(function() {
                // 链式编程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.点击的同时,得到当前li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3.让下部里面相应索引号的item显示,其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })
    </script>
结果演示


动画效果(具体请看jq API)

显示隐藏效果(举例)

show([speed,[easing],[fn]]) //显示
hide(同上) //隐藏
toggle(同上)//切换显示和隐藏

动画队列及其停止排队方法

动画或效果队列

动画或效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行。

stop()方法用于停止动画或效果,它必须写到动画或效果的前面,相当于停止结束上一次的动画。

举例:

$(this).children("ul").stop().slideToggle();
只要是动画,都会有排队的情况,所以要在动画前面写上stop()来停止动画

自定义动画animate(重点)

animate(params,[speed],[easing],[fn])

属性操作

获取(固有)属性值

prop("属性名")

设置属性及其值

$(this).prop("属性名","我是值");

自定义属性

获取自定义属性值

attr("属性名")

设置自定义属性

attr("属性名",属性值)

数据缓存data()

data()方法可以在指定的元素上存取数据,不会修改DOM元素结构(即在元素结构内看不到该数据),一旦页面刷新,之前存放的数据都将被移除。

$("span").data("uname","wang");  //在被选元素内附加数据
data("属性名")。//在被选元素内获取数据

 全选反选案例

<script src="https://demo.wangxuelong.vip/js/jquery/jquery.min.js"></script>
    <script>

        $(function(){
            //只要全选按钮发生变化就执行代码
            $(".j_cbAll").change(function(){
                //首先拿到全选按钮的值 $(this).prop("checked"),然后赋值给小按钮以及所以全选按钮
                $(".j-checkbox, .j_cbAll").prop("checked", $(this).prop("checked"));
            });
            $(".j-checkbox").change(function(){
                //如果被选的小按钮的个数==4
                if($(".j-checkbox:checked").length === $(".j-checkbox").length){
                    //就要选中全选按钮
                    $(".j_cbAll").prop("checked",true);
                }else{
                    $(".j_cbAll").prop("checked",false);
                }
            })
        })
    </script>
结果演示


内容文本值

//获取元素内容
html()
//设置元素文本内容
html("值")
//获取普通元素内容
text()
//获取表单值
$("input").val();
//设置表单值
val("值")

元素操作

遍历元素

$("div").each(function(index,domEle){xxx;})
  • each()方法是遍历匹配的每一个元素
  • 回调函数参数中,index是每个元素的索引号,demEle是每个DOM元素对象(即每个div元素),不是jq对象。

案例:根据不同索引设置不同div的颜色

<script>
        $(function(){
            var arr=["red","green","blue"];
            //第一种遍历的方法,比如dom对象
            $("div").each(function(i,domEle){
                $(domEle).css("color",arr[i]);
            })
            //第二种遍历的方法 ,主要用来遍历数据,处理处理数据,比如数据和对象
            $.each(arr,function(i,value){

            })
        })
    </script>

元素增删改

 //创建元素
var li = $("<li></li>");
//添加元素
//内部添加元素
$("ul").append(li); //内部添加并且放到内容的最后面
$("ul").prepend(li);//放到内容的最前面
//外部添加
var div=$("<div></div>");
//放到目标元素的后面
$(".test").before(div);

//删除元素
$("ul").remove(); //删除匹配的元素
$("ul").empty(); //删除匹配元素里面所有子节点,即清空

尺寸位置操作

尺寸

offset()设置或获取元素偏移

  • 该方法设置或获取被选元素是相当于文档的偏移坐标,跟父级没有关系。
  • 该方法有2个属性lest、top。offset().top 用于获取距离文档顶部的距离
  • 可以设置元素的偏移:offset({top:10,left:30});

position()获取带有定位父级的位置(偏移)

  • 该方法只能获取不能设置

设置或获取元素被卷去的头部和左侧

  • scrollTop()设置或获取元素被卷去的头部
  • scrollLeft()设置或获取元素被卷去的左侧

返回顶部案例

<script>
        $(".back").click(function(){
            //只有元素才能坐动画,不能是文档document
            $("body,html").stop().animate({
                scrollTop:0
            });
        })
    </script>

事件

事件处理

on可以处理一个或多个事件(优势1)

one()绑定事件,只能触发一次。

<script>
    $(function () {
        $("div").on({
            mouseenter:function(){
                $(this).css("color","red");
            },
            click:function(){
                $(this).css("color","blue");
            }
        });
    })
    </script>

事件委托

优势2

<script>
        $(function () {
        // $("ul li").click();
        $("ul").on("click","li",function(){
            //会冒泡到父亲身上,但是触发的对象是ul 里面的li
        });
    })
    </script>

优势3: on可以给未来动态创建的元素绑定事件

<script>
        $(function () {
        $("ol").on("click","li",function(){
            alert(1);
        })
        var li = $("<li>后来创建</li>");
        $("ol").append(li);
        })
    </script>

事件解绑off()

该方法可以移除通过on()方法添加的事件

$("p").off("click") //解绑p元素上面的点击事件
$("ul").off("click","li"); //解绑事件委托

自动触发事件

$("div").click(); //会触发元素的默认行为
$("div").trigger("click"); //会触发元素的默认行为
$("div").triggerHandler("click"); //不会触发元素的默认行为,比如表单的光标闪烁

事件对象

$("ol").on("click",function(event){
            event.方法();
        })

对象拷贝

语法:

$.extend([deep],target,object1,[objectN])
  • deep  如果是true就深拷贝
  • tartget 要拷贝的目标对象
  • object1 待拷贝到target的对象
  • 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝的对象。重复数据会覆盖。
  • 深拷贝是完全克隆,拷贝的是对象不是地址,修改目标对象不会影响被拷贝的对象。重复数据不会覆盖,而是会新开辟一个空间存起来。

渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery初识
喜欢 (1)

您必须 登录 才能发表评论!