常识 备忘

//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]);