$("p")
$(".box")
$("#box")
$("#box ul li")
$("li.special")
$("ol , ul")
$("*")----获取document里面所有的元素
还是比较重要的
/* 筛选选择器 ---- 都是从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"); });