前端学习:jQuery属性操作,事件,元素查询,tab选项卡,单位换算,全选框

1.属性操作

1.1 操作 css

       传递属性名,属性值

                $("div").css("color","red").css("font-size","100px");

        css方法里面可以传递一个对象     对象中的属性名如果有多个单词组成 

                                                        1.使用驼峰(不用字符串包裹)

                                                         2.用-连接(必须用字符串包裹)

 $("div").css({
            color:"red",
            "font-size":"100px",
            backgroundColor:"blue"
        })

传的对象里面,key对应的值可以是个函数

  $('div').css({
            width:function(index,value){
                return 100
            },
            height:function(){
                return 100
            }
        })

传属性名和一个函数

$('div').css("color",function () {
            return "red";
        })

        $('div').css("color",function (index,value) {
            if(index === 0){
                return "red";
            }
            else{
                return "blue"
            }
        })

1.2 属性  attribute  property

在jQuery中 attribute  属性   获取元素的固有属性自定义属性     attr()

                    property 属性   用于获取selected  checked             prop()      效率高

  // 获得属性

        console.log("==== ", $("p").attr("title"));

        // 设置固有属性

        $("p").attr("title", "我换个词");

        // 设置自定义属性

        $("p").attr("num", 10);

        // 删除属性

        $("p").removeAttr("num");

        //   获取单选框的状态

console.log("====== ", $("input").attr("checked"));//checked    <input type="radio" checked>

        console.log("====== ", $("input").prop("checked"));//true

        console.dir(document.querySelector('input'));

1.3  关于class的操作

        //是否拥有

    console.log('------ ', $("main").hasClass("box"));//true

        //添加

        $("main").addClass("box1");

        // 移除

        $("main").removeClass("box1");

        // 切换

        $("main").toggleClass("box1");

2.jQuery事件

复习:dom事件的添加和移除    

        var btn = document.querySelector('button');

        btn.onclick = function () {

        }

        btn.onclick = function () {

        }//赋值操作会覆盖

        btn.addEventListener("click",fn);

        function fn() {

        }

        btn.onclick = null;

        btn.removeEventListener("click",fn);

window事件的加载

         window.onload = function () {

        }// 等待 所有的资源文件 (音视频文件 图片) 和 dom结构加载完毕后执行 onload  

       document.documentElement.addEventListener("DOMContentLoaded",function () {

        }) // 只等待dom结构加载完毕后执行

jquery事件的加载

        $(document).ready(function(){}) ; //等待dom结构加载完成执行  等同于         DOMContentLoaded

        $(function(){});   //等同于ready  同上

// 等同于 window.onload

         $(window).ready(function () {

         });

事件的绑定

        是通过调方法来实现事件的绑定的,如果重复调方法就都会执行,不会覆盖

 click()方法里面传一个回调函数,实现点击事件

 off()方法实现事件的解绑

 // 多个同时执行
        $("button").eq(0).click(function (e) {
            e.preventDefault();
            console.log(" ===== ");
        });

        $("button").eq(0).click(function (e) {
            e.preventDefault();
            console.log(" 111111111111 ");
            console.log(this); // 此处为原生的dom对象

            // 事件的解绑
            $(this).off();
            $(this).off("click");
        });

change()方法   可搭配prop()方法来获取单选框及多选框的选中状态

       $("input").eq(0).change(function () {
            console.log($(this).prop("checked"));
        })

在jquery中没有input方法  要想实现,可以用on()方法来实现,对于其他类型事件的绑定 也可以通过on()方法         可以通过  val()方法  获取元素的值

    // 对于其他元素的绑定 也可以通过 on 方法 
        $("input").eq(1).on("input",function () {
            // val() 获取元素的值 
            console.log(" ===== ",$(this).val());
            console.log(" ===== ",this.value);
        })

3.元素的查询

查询子元素   children()

 console.log("子元素====", $("div").children());//所有的子元素
 console.log("子元素====", $("div").children(".a"))// 过滤选择所有子元素

查询父元素    parent()      partents()

        console.log('父元素====', $("span").parent());// 只查询其最近的父元素 
         // 参数可选  如果传递选择器 则找它对应的父元素 
        console.log("父元素====", $("span").parents());// 查询所有的父元素
        console.log("父元素====", $("span").parents(".box"));// 查找指定的父元素
        console.log("父元素====", $("span").parents("body"));// 查找指定的父元素

 查询兄弟节点   next()   nextAll()  prev()   prevAll()  siblings()

 console.log("兄弟元素 ==== ", $("span").next());// 紧邻的兄弟元素
        console.log("兄弟元素 ==== ", $("span").next(".b"));// 查询指定选择器紧邻的兄弟元素


        console.log("兄弟元素 ==== ", $("span").nextAll());// 查询当前节点后所有兄弟元素
        console.log("兄弟元素 ==== ", $("span").nextAll(".a"));// 查询当前节点后所有指定选择器兄弟元素

        console.log("兄弟元素 ==== ", $("span").prev());// 查询当前节点前兄弟元素
        console.log("兄弟元素 ==== ", $("span").prevAll());


        console.log("所有的兄弟元素 === ", $("span").siblings());// 查询所有的兄弟元素
        console.log("所有的兄弟元素 === ", $("span").siblings(".a"));

查询第几个元素    eq(0)   first()

  $("h1").eq(0);// 查询第几个元素
        $("h1").first().css("color", "red");

判断是否为那个元素     is()

 // 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,
//如果其中至少有一个元素符合这个给定的表达式就返回true。
        $("h1").parent().is("body")

过滤    filter()   可传一个回调函数,或者选择器

 console.log("过滤  === ", $("h1").filter(".other"));
        console.log("过滤  === ", $("h1").filter(function (index, el) {
            return $(el).is(".other")
        }));

查找后代元素   find()

 console.log("查找 ==== ", $("body").find(".other"));// find 查找后代元素的

not()    not("[nodeType=3]")

 console.log(" === ", $("h2").not(".byebye")); 
 $("h2").not((index, el) => $(el).hasClass("byebye")).css('color', "red");

串联   相当于并集选择器   add()

 $("h1").add("h2").css("color","green");//$("h1,h2")

addBack()   回过来选自身

 $("h1").nextAll().addBack().css("color", "green");

contents()      查找匹配元素内部所有的子节点(包括文本节点)

console.log($("span").contents().not("[nodeType=3]").wrap("<b />"));

4.tab选项卡

选出li添加click方法里面传一个回调函数:利用jquery的方法返回的依然是jquery对象可以链式调用方法给自身添加背景高亮的类.addClass("active"),所有的兄弟元素siblings().移除高亮类

再通过当前事件的执行者的index()方法找到其对应的索引值,再通过索引值找到对应的内容用添加类将其显示,内容的所有兄弟都隐藏

$("li").click(function () {

            console.log($(this).index())
            // 控制tab
            // $("li").removeClass("active");
            // $(this).addClass("active");
            // // 控制内容
            // $(".content div").removeClass("show");
            // $(".content div").eq($(this).index()).addClass("show");

            // 简单写法
            $(this).addClass("active").siblings().removeClass("active");
            $(".content div").eq($(this).index()).addClass("show").siblings().removeClass("show");
        })

5.单位换算

定义一个二维数组存放每个框对应的换算比例,找到所有的框用on()方法绑定input事件,在回调函数里用$(this).index()的索引值找到二维数组里对应的当前输入框的换算比例关系(小数组),取到输入的值遍历小数组,利用遍历时的索引给每个input框赋相应的值

 var array = [[1,10,100],[0.1,1,10],[0.01,0.1,1]];
        $("input").on("input",function () {
            // 拿到换算关系
            console.log($(this).index());
            var smallArray = array[$(this).index()];
            // 输入的值
            var value = $(this).val();
            // 遍历比例
            smallArray.forEach((val,i) => {
                $("input").eq(i).val(val * value);
            })
        })

6.全选框

首先控制全选,用prop()方法将全选的选中状态赋给每一个单选的选中状态,在text()方法中用三目运算符改变"全不选":"全选";后面a标签的点击事件中首先要将全选按钮的选中状态取反,然后也要将全选的选中状态赋给每个单选,改变“全选”,“全不选”文字;    在给每个单选框添加change()方法的回调函数中利用jquery对象的length属性即元素的长度,判断选中状态的单选框的长度和所有单选框的长度是否相同即所有单选框是否都被选中,从而改变全选框的选中状态。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $("div input").change(function () {
            selAll(this);
        })


        // 控制main input的选中
        function selAll(selector) {
            $("main input").prop("checked", $(selector).prop("checked"));
            $("span").text($("span").text() === "全选" ? "全不选" : "全选");
        }

        $("a").click(function () {
            $("div input").prop("checked", !$("div input").prop("checked"));
            selAll("div input");
        })


        $("main input").change(function () {
            // 获取元素的总长度
            console.log($("main input").length);
            // 选中的长度
            console.log($("main input:checked").length);

            if ($("main input").length === $("main input:checked").length) {
                $("div input").prop("checked", true);
            }
            else {
                $("div input").prop("checked", false);
            }
            $("span").text($("div input").prop("checked") ? "全不选":"全选");

        })

    </script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值