jQuery选择器和操作CSS样式

    xiaoxiao2024-12-21  3

    1、jQuery选择器的迭代

     

    $("p")

    $(".box")

    $("#box")

    $("#box ul li")

    $("li.special")

    $("ol , ul")

    $("*")----获取document里面所有的元素

    2、animate函数

    /* animate函数------animate(obj,myJson,time,callBack);   对于animat来说单纯的js对象不能被animate点,要把对象放在$()里面才能用Jquery里 面的东西。 */ /* 方式一 */ $(".box p").animate({left:500},2000,function(){    console.log("运行结束!"); }) ​ /* 方式二 */ var a = $("ul li p"); $(a).animate({left:600},2000,function () {    alert("运动完成!"); }); ​

    3、筛选选择器

    还是比较重要的

    /* 筛选选择器 ---- 都是从0开始 lt() ---- 小于 gt() ---- 大于 odd() ---- 奇数从 从下标1开始 even() ----偶数 eq() ---- 选中第n个目标, */ $(".box p:lt(2)");//在选中的集合中选中小于(个数)2的p $(".box p:gt(2)");//在选中的集合中选中大于(个数)2的p ​ /* eq()动态获取(解耦) */ var a = 2; $(".box p").eq(a).css({background:"deeppink"});

    map方法

    类数组没有map等方法

    /* 原生map--数组下面的方法---对比---Python的map方法可以直接传入对象 */ var arr = [1,2,3]; var arr1 = [3,4,56]; var b = arr.map(function(items){    return items+1; }); /* 参考Python的写法,Python没有数组,有列表   arr = [1,2,3]   def add(items):       return items+1   print(list(map(add,arr)))---[2, 3, 4] */ ​ console.log(b);//Array(3) [ 2, 3, 4 ]     /* jQuery--map方法 可以批量操作*/    var num = $(".box p").map(function(items){        return $(this).html()   })

     

    获取表单的内容----map的简单应用

    <form action="#"> 姓名:<input type="text"><br><br> 年龄:<input type="text"><br><br> 性别:<input type="text"><br><br>    <button>提交</button> </form> <script src='https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js'></script> <script>    $("button").click(function(){        var arr = $("input").map(function(){            return $(this).val();//于数组的形式返回       })        console.log(arr.get(1));//获取年龄   });; </script>

    slice、children方法

    /*   slice(a,b) 选中从a到b但是不包括b 从下标0开始 */ $(".bxo p").slice(1,3).css({"background":"green"}); ​ /* children() 选中指定的亲儿子 */ $(".bxo p").children("span").css({"background":"green"}); ​ /* find() -- 选中指定的后代,不给参数的话就是选中当前对象的所有子标签 ,也可以不给参数 */ $(".bxo p").children("span").css({"background":"green"}); ​ /* parent()---选中父亲,不需要传参数 */ $("p").parent().css({backgroundColor:"deeppink"}); ​ /* parents ---选中指定的父亲 可以选参数 */ $("p").parents("li").css({backgroundColor:"deeppink"}); ​ /* */

    添加和删除类名

    /* 添加类名: addClass("类名")--添加类名 removeClass("类名")--删除类名 siblings() --- 选中其他兄弟 */ /* 添加并且删除其余兄弟的所有类名"on" */ var a = $("ul li"); a.click(function () {    $(this).addClass("on").siblings().removeClass("on"); });

    2、jQuery操作CSS样式

    /* 设置单个样式 */ $(".box p").css("background","deeppink"); /* 设置多个样式 */ $(".box p").css({    background:"deeppink",    width:100 }) /* 在原来的基础上添加宽高 */ $(".box p").css({    background:"deeppink",    width:"+=50"//在原来的基础上加50像素 }) /* 获取原来定位的位置 */ var left = $("div p").position().left; var Top = $("div p").position().top; ​ /* 获取内容的宽高:实际样式 */ var width = $("div p").width(); var height = $("div p").height(); ​ /* widht+padding+border---要border */ var width = $("div p").outerWidth(); var height = $("div p").outerHeight(); ​ /* widht+padding -- 不要border*/ var width = $("div p").innerWidth(); var height = $("div p").innerHeight(); ​ /* 滚动条高度 时实获取滚动高度 */ $(document).scroll(function () {    console.log($(this).scrollTop()); });

     

    最新回复(0)