jQuery学习笔记_jquery排他思想边框-CSDN博客

本文链接：https://blog.csdn.net/huangjinghui66/article/details/127451085

使用方法

引入js：

 <script src="jquery.min.js"></script>

简单学习，将div隐藏

<body>
    <script>
        // $('div').hide();
        // 1.等页面的DOM元素加载完毕再进行js的渲染
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        $(function() {
            $('div').hide();
        })
    </script>
    <div></div>
</body>
<!-- <script>
    $('div').hide();
</script> -->

jquery的代码可以有三种方法写入html中(入口函数)

一按顺序，从上到下执行代码script的代码写在body下面

二利用ready函数等页面的DOM元素加载完毕

$(document).ready.(function(){

})

在原生js中相当于是

window.addEventListener(‘load’,function(){

})

三 $(function(){

})

隐式迭代

 <div>牛啊666</div>
    <div>牛啊666</div>
    <div>牛啊666</div>
    <div>牛啊666</div>
    <div>牛啊666</div>
    <ul>
        <li>99999</li>
        <li>99999</li>
        <li>99999</li>
        <li>99999</li>

    </ul>
  <script>
    $('div').css("background", "pink");
</script>

在上面的代码中，div盒子的背景都会改成pink色，原因就是因为隐式迭代，在jquery当中会将所有divDOM元素当伪数组储存，会遍历整个伪数组，这个过程中就叫隐式迭代

jQuery筛选方法

<body>
    <div>牛啊666</div>
    <div>牛啊666</div>
    <div>牛啊666</div>
    <div>牛啊666</div>
    <div>牛啊666</div>
    <ul>
        <li>99999</li>
        <li>99999</li>
        <li>99999</li>
        <li>99999</li>

    </ul>
    <ol>
        <li>888888</li>
        <li>888888</li>
        <li>888888</li>
        <li>888888</li>
        <li>888888</li>
    </ol>
</body>
<script>
    $('div').css("background", "pink");
    $('ul li').css('color', 'red');
    $(' ul li:eq(3)').css('color', 'blue');
    $('ol li:odd').css('color', 'pink');
    $('ol li:even').css('color', 'green');
</script>

eq方法，选择jquery中的伪数组中的索引号，比如eq(2)就是第三个div盒子伪数组的索引号从0开始

odd选择所有索引号奇数

even选择所有索引为偶数

其他筛选方式

$(function() {
        $("ul .item").siblings("li").css("background", "red"); //siblings除了自己其他兄弟都改变
        // eq我们可以用两种方法
        // （1）我们可以用选择器的方式
        $("ol li:eq(2)").css("background", "pink");
        //（2）我们利用选择方法  更推荐这一种 当eq中的2，改成index那么上一个就要改写   $("ol li:eq("+index+")").css("background", "pink");
        $("ol li").eq(2).css("background", "purple");
    })

jquery排他思想

利用siblings把兄弟改掉

 $(function() {
        $("#left li").mouseover(function() {
            var index = $(this).index();
            console.log(index);
            $("#content div").eq(index).show().siblings().hide();
            // $("#content div").eq(index).show();
            // $("#content div").eq(index).siblings().hide();
        })
    })

index()函数在jquery中可以返回出伪数组中的索引号

$(“#content div”).eq(index).show();
$(“#content div”).eq(index).siblings().hide();

先将自己显示出来，在将自己的兄弟干掉

样式修改

    $(function() {
        console.log($("div").css("width")); //当css中只有一个属性，那么就只返回该属性的值，不会修改
        // $("div").css("backgroundColor", "red"); //当属性为两个单词构成的，那么就用驼峰命名法
        $("div").css({
                width: 300,
                height: 300,
                backgroundColor: "red"
            }) //当需要改变多个属性，就可以在css中写对象
    })

当css中只有一个属性，那么就只返回该属性的值，不会被修改

当属性为两个单词构成的，那么就用驼峰命名法

当需要改变多个属性，就可以在css中写成对象的形式

jquery属性操作

prop 可以查看和修改DOM元素的属性 a的href input的value等等

标准写法

console.log($("a").prop("title"));
        $("a").prop("title", "好的呢");
        $("input").change(function() {
            console.log($(this).prop("checked"));
        })

porp中有一个属性，那就是输出属性值

        $("div").attr("index", 4);
        console.log($("div").attr("index"));
        console.log($("div").data("index"));
        $("span").data("uname", "andy");
        console.log($("span").data("uname"));
        $("span").data("index", 4);
        console.log($("span").data("index"));

prop是查找DOM元素已有的属性，而不能找到自定义属性

  <div index="2" data-index="3"> 123</div>

index和data-index都是自定义属性

这个时候就用attr函数可以查找到自定义属性

data函数的储存方式不是显示在DOM元素上，而是以内存的方式储存着

data-index以data-开头的用data可以查到，data和attr查找的区别是data返回的属性值是数字类的，而attr返回的是字符类

jquery内容文本

html函数相当于原生js中的innerHtml

    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="我是内容">

   $("div span").html("123");
        console.log($("div").html());// <span>我是内容</span>
        console.log($("div").text());
        $("input").val("132");
        console.log($("input").val());

html函数里面没有参数时，就是输出该DOM元素的所有

当函数有值，那么就会修改该DOM元素的结构和文本

text函数相当于原生js的innerText

只输出DOM元素的文本

jquery遍历方法

虽然jquery中有隐式迭代，但是当让每个div有不同的color或者background，那么隐式迭代就不是那么好用了

所以jquery引入了each函数，也可以做到遍历元素

方法一：$(“div”).each(functoin(index,domEle){

//index就是索引号，domEle是原生js的DOM元素，在jquery用的$(domEle)

})

   var arr = ["red", "blue", "pink"]
        $("div").each(function(index, domEle) {
            console.log(index);
            $(domEle).css("color", arr[index]); //domEle是原生DOM元素，所以在jquery用的时候前面加$
        })

方法二：

$.each(“div”,function(index,domEle){

index和domEle 和方法一的参数一样

})

 $.each($("div"), function(i, ele) {
                console.log(i);
                console.log(ele);
            }) //两种方法都可以遍历数组，但是第二种可以遍历自定义的数组
        $.each(arr, function(i, ele) {
            console.log(i);
            console.log(ele);
        });
        $.each({
            name: "andy",
            age: 18

        }, function(i, ele) {
            console.log(i);
            console.log(ele);
        })

两种两种方法都可以遍历数组，但是第二种可以遍历自定义的数组，在js中自己定义的数组arr

jquery添加和删除元素

创建元素

  var li = $("<li>222</li>");

添加元素

1添加到内部的有append和prepend函数

append函数添加到内部的最后面

prepend函数添加到内部的最前面

  $("ul").append(li); //在ul里面的最后面插入
        $("ul").prepend(li); //在ul里面的最前面插入

2添加到外部有after和before函数

after函数是添加到外部的后面

before函数是添加的外部的前面

   var div = $("<div>我是后来的</div>");
        $("div").before(div); //在div的外面的后面
        $("div").after(div); //在div的外面的前面

删除元素

remove函数删除所有包括自己

empty函数html函数删除自己的子节点自己没删除

        $("ul").remove(); //删除所有包括自己
        $("ul").empty(); //删除自己的子节点 自己没删除
        $("ul").html("")  //和empty一样保留自己

jquery尺寸和位置

jquery有自己的宽度高度输出函数

  console.log($("div").width());
        console.log($("div").innerWidth());
        console.log($("div").outerWidth());
        console.log($("div").outerWidth(true));

width函数输出该盒子的宽度

innerWidth函数是输出width宽度和padding内边距

outerWidth函数是输出width宽度和padding内边距和border边框

outerWidth函数true输出的width宽度和padding和border和margin外边距

        console.log($(".son").offset());
        console.log($(".son").offset().top);
        $(".son").offset({
            left: 200,
            top: 200
        })

offset函数里面的有left和top，是该元素到文档的上边和左边的距离

如果要改变DOM元素的left和top值，offset是以对象的形式修改，offset函数的距离与position没有关系

        console.log($(".son").position()); //position不可以修改top和left值

position是absloute到relative的距离，不是文档的距离

position不可以修改top和left值

jquery事件

     $("div").on({
                  click: function() {
                         $(this).css("backgroundColor", "red")
                   },
                  mouseenter: function() {
                       $(this).css("background", "blue")
                 }
             }) //绑定多个事件的

on函数可以绑定多个事件，以对象的方式储存

on还可以进行事件委托，利用事件冒泡，可点击li触发ul绑定的事件

        $("ul").on("click", "li", function() {
                alert(11); //事件冒泡，点击li可以使ul事件触发
            })

on还可以对动态创建的元素进行绑定

$("ol").on("click", "li", function() {
         alert(11);
     })
     var li = $("<li>我是后来的</li>");
     $("ol").append(li);

解绑事件

解绑事件用off函数

  $("div").on("click", function() {
            console.log("我点击了");
        })
        $("div").on("mouseenter", function() {
            console.log("我过来了");
        })
        $("div").off("click");

如果off函数里面没有写任何东西，那么就是将元素的所有事件全部解绑

如果加了click就是解绑click事件

        $("ul").on("click", "li", function() {
            console.log("冒泡");
        })
        $("ul").off("click", "li")

如果传的是两个参数时，就是解绑ul中li的事件

自动触发事件

        $("div").click();
        $("div").trigger("click");
        $("div").triggerHandler("click");

jquery中有三种自动触发事件triggerHandler事件不会触发元素的默认事件

事件对象

$.extend事件对象的拷贝

   var target = {
            id: 2,
            msg: {
                id: 2
            }
        };
        var obj = {
                id: 1,
                name: 'andy',
                msg: {
                    age: 14
                }
            }

两个对象可以用$.extend进行拷贝

$.extend([deep],target,object)

deep=false

浅拷贝，把msg的地址拷贝到target里面，所以target可以修改msg中的age值，obj和target的msg的地址是一样，target修改obj也会改变

deep=true

深拷贝，把所有值都给target，不会给地址，target中的msg id不会被覆盖，target中msg地址和obj不一样，修改不会改变

数据可视化

复习tab栏转换

重点重点！！！！

用jquery写很方便

    <div class='d1'>
        <div class='tab_list'>
            <ul>
                <li class='current'>我的空间</li>
                <li>联系方式</li>
                <li>我的博客</li>
                <li>评论</li>
                <li>更多</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                <a href="https://user.qzone.qq.com/1479898695/infocenter">QQ空间</a>
            </div>
            <div class="item">
                Harris
            </div>
            <div class="item">
                <a href="https://blog.csdn.net/weixin_45750972">Harris's blog</a>
            </div>
            <div class="item">
                哇哦,我还是太菜了
            </div>
            <div class="item">
                ................
            </div>

        </div>

可以利用排他思想，但是用jquery可以进行链式编写

在给li绑定一个点击事件

   $(function() {
            $('.tab_list li').click(function() {
                $(this).addClass("current").siblings().removeClass("current");
                var idx = $(this).index();
                $('.tab_con .item').eq(idx).show().siblings().hide();
            });
        })

给自己添加current样式，让其他兄弟除去current样式

因为上下要一致，所以我们可以利用this的index求出索引，因为一个小li对应div，所以小li的索引就是div的索引在这里插入代码片