//1.$.each var arrint = [1, 2, 3, 4]; $.each(arrint, function (key, value) {//数组: key:索引 value:值 if (key == 3) { return false;//在eah中,跳出循环不能用break。 } console.log(key + ":" + value) }); var person = { 'name': '帐单', 'age': 18, 'email': '110.qq.com' }; $.each(person, function (k, v) {//对象:key:属性 value:属性值 console.log(k + ":" + v); }); //2. $.trim var s = ' ddddff '; console.log('--?' + $.trim(s) + '?--') console.log('--?' + s.trim() + '?--'); //2.$.map var aaa = [10, 20, 30, 40, 50, 60, 70, 80, 90]; var aaabbb = $.map(aaa, function (element_value, index) { //如果不知道所返回的参数,用 arguments.length 就知道几个参数了。 return element_value*2;//对每个元素进行处理 }); //3 dom对象和juuery对象的互转 //dom=》jq var doc = document.getElementById('div1'); var $doc1 = $(doc); //jq=>dom var doc2 = $doc1[0]; var doc3 = $doc1.get(0);
//1隐式迭代和链式编程(如果某个过程破坏了链式结构,在其后面加end()进行修复) $("#btn1").click(function () { $("p").text("大家都是P") .css("border", "1px solid red") .css("backgroundColor", "yellow") .mouseover(function () { $(this).css("backgroundColor", "red") .css("cursor", "pointer") .siblings() .css("backgroundColor", "blue"); }); }); //2选择器 //2.1 (标签+类 选择器) 所有p元素中,引用了aa样式的元素 $("p.aa").css("cursor", "pointer"); //2.2 组合选择器并列() $("#div1,.class1,span").css("cursor", "pointer"); //2.3 层次选择器 //2.3.1后代:标签div下的所有p元素 $("div p").css("cursor", "pointer"); //2.3.2 子元素:选取body下的直接子元素span $("body>span").css("cursor", "pointer"); //2.3.3 相邻元素1 如果相邻的那个元素不是指定元素,不会继续向后找 $(".class1 + div").css("cursor", "pointer"); $(".class1").next("div").css("cursor", "pointer"); //2.3.4 相邻元素2 $(".class1 ~ div").css("cursor", "pointer"); $(".class1").nextAll("div").css("cursor", "pointer"); //2.3.5 获取class1的上一个兄弟元素,并且该兄弟元素必须是span $(".class1").prev("span").css("cursor", "pointer");
//判断是否有某个样式 var bool = $("body").hasClass("aaa") //添加样式,不覆盖原先的样式 $("body").addClass("aaa"); //移除某个样式 $("body").removeClass("aaa"); //判断某个样式aaa,如果有,移除该样式;没有的话,进行添加 $("body").toggleClass("aaa");
//过滤器 //第一个 $("td:first").css("backgroundColor", "black"); //第二个 $("td:eq(1)").css("backgroundColor", "blue"); //偶数(从0开始,跟看到的相反) $("td:even").css("backgroundColor", "yellow"); //奇数 $("td:odd").css("backgroundColor", "orange"); //最后一个 $("td:last").css("backgroundColor", "red"); //索引大于2的 $("td:gt(2)").css("backgroundColor", "black"); //索引大于3的 $("td:lt(2)").css("backgroundColor", "black"); //可以进行合并 索引大于0小于2的 $("td:gt(0):lt(2)").css("backgroundColor", "black"); //not 除了应用了cls的所有td元素 $("td:not(.cls)").css("backgroundColor", "black"); //header jQuery的:header选择器用于匹配所有的标题元素(h1 ~ h6),将其封装为jQuery对象并返回 $(":header").css("backgroundColor", "pink"); $("#t1 tr").click(function () { //第二个参数表示上下文,规定了范围(this=当前行) $("td:odd", this).css("backgroundColor", "blue"); });
//属性过滤器 //属性name=txt1的所有input元素 $("input[name=txt1]").css("",""); //具有name属性的所有input元素 $("input[name]").css("", ""); //选取body下面具有name属性的所有元素 $("body *[name]").css("", ""); $("body [name]").css("", ""); //body下面具有name属性,并且name值以“a”开头的元素 $("body *[name^=a]").css("", ""); //body下面具有name属性,并且name值以“a”结尾的元素 $("body *[name$=a]").css("", ""); //body下面具有name属性,并且name值包含“a”的元素 $("body *[name*=a]").css("", ""); //body下面具有name属性,并且name值为空的元素 $("body *[name=]").css("", ""); //name属性值不等于aa $("*[name!=aa]").css("", ""); //具有多个属性的(=为限制条件) $("*[name][id][value=aaa]").css("","");
//所有:所有被禁用的元素 ( <input type="button" value="aaaa" disabled="disabled" />) $(":disabled").css("border", "1px solid red"); //所有被启用的元素 $(":enabled").css("border","1px solid red"); //限制范围:from1下的所有被启用的元素 $("#form1 :enabled").css("",""); //选取表单元素,同时该表单元素是被启用状态的元素 $("input:enabled").css("", ""); //所有被选中的元素 $(":checked").css("",""); //所有没被选中的元素 $(":not(:checked)").css("", ""); // $(":selected").css("", ""); //select标签下没有被选中的元素 $("select :not(:selected)").css("","")
//所有checkbox元素 $(":checkbox") //所有input[type='radio']元素 $(":radio") //所有input[type='text']的元素 $(":text") //所有input[type='passsword']的元素 $(":passsword")
//动态创建元素 //1 被动加入 prepend=加到前面 append=加到后面 after=兄弟层的后面 before=兄弟层的前面 //创建超链接 var a = $("<a href='http://www.baidu.com'>百度</a>"); $("#div1").after(a);// //2 主动加入 appendTo prependTo insertAfter insertBefore $("<a href='http://www.qq.com'>QQ</a>").appendTo("#div1");
// 清除元素 //清空元素内部 $("#div1").empty(); //直接把p元素删除 $("p").remove(); //把带有类名a的p元素删除 var v = $("p").remove(".a");
//1 替换元素 //先选择到对应的元素,然后使用指定的元素来替换选择到的元素 $("hr").replaceWith("<a href='#'>baidu</a>") //首先动态创建元素,用该元素替换指定的选择器选择到的那些元素 $("<font>====</font>").replaceAll("hr"); //2 包裹元素 //分别包裹在元素外 $("p").wrap('<div style="background-color:red"></div>'); //分别包裹在元素内 $("p").wrapInner('<div style="background-color:black"></div>') //所有的p标签被一个元素包裹着。如果有其他的元素,会被剔除出去。 $("p").wrapAll('<div style="background-color:yellow"></div>'); //3 设置radio checkbox的默认选择值 $(":radio").val([value1, value2]); $(":checkbox").val([value1, value2]);