jQuery

通过Jq获取到的元素是JQ对象，通过元素的document.get***获取到的元素是原生对象，原生对象不能使用JQ里面的方法和属性，JQ对象调用原生的方法和属性

JQ对象和原生对象可以相互转换

• 原生对象如何转JQ : 直接使用 $(原生对象)
  var content=document.getElementsByClassName("content")[0];
  $(content).css("color","red");
• JQ对象如何转原生对象 方法1 直接在前面加[0] 方法2 JQ对象.get(0)
  $(".content")[0].innerHTML="显示"
  $(".content").get(0).innerHTML="显示2"

获取元素 $("")里面给的是字符串-选择器

• first 是第一个P标签
  console.log($("p:first"));
• odd基数索引 even偶数索引
  $("p:odd").css("color","red");
  $("p:even").css("color","red");
• eq(2)从 0 开始计数
  $("p:eq(2)").css("color","red")
• gt(2)从 0 开始计数 2之后的变换
  $("p:gt(2)").css("color","red")

创建元素 添加元素 append添加 appendTo加入到

p.append(span)给p插入子集span
p.appendTo(body)把p插入body里面
prepend和prependTo用法和append一样，不同点在于prepend是在最前面插入
$("<p class='item2' style='color:green;'>插个P标签</p>").prepend($("<span>span标签</span>")).prependTo($(".box"))
$(".item2").before($(".content"))

• after content 后面有一个item2
  $(".content").after($(".item2"))
• insertAfter 把item2插入到content之后
  $(".item2").insertAfter($(".content"))
• 包裹p 把每个p包裹在div内 wrapAll把所有的p都包裹在同一个div里面，父级在第一个p的位置
  $("p").wrap("<div class='BB'></div>");
  当参数是函数的时候，jq会把函数的返回值作为包裹p父级来使用
• unwrap 把父级消失
  $(".content").unwrap(".box")
• 把所有段落内的每个子内容加粗
  $("p").wrapInner("<b>12</b>");
• 删除元素
  remove这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
  detach这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

修改/获取CSS样式 css和style 属性都可以获取到

筛选

console.log($("p:eq(1)").css("color"));
console.log($("p").eq(1).css("color"));

设置样式第一种样式

  $("p").css("color","pink");

设置样式第二种样式

$("p").css({
        color:"red",
        border:"1px solid green"
    
    } )

设置样式第三种样式

var cArr=["yellow","red","green","purple","cyan","pink"]
$("p:last").css("color",function(index,oldvalue){
    console.log(index,oldvalue);
    return cArr[index];


})

修改/获取内容

$("p").html("<div>hello</div>")
 $("img").attr("src", "1.png");

将文档中图像的src属性删除

$("img").removeAttr("src");

JQ2属性和事件

自定义属性，使用谁谁就能获取到
HTML元素本身就带有的固有属性，在处理时，使用prop方法。
HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
获取src的时候，prop是绝对路径

    $(":button").prop("index","10")
    $(":button").attr("index","10")
    $("input[type=button]").click(function(){
        // 获取属性
        // 获取系统自带的属性可以使用prop
        console.log($(":checkbox").attr("checked"));
        console.log($(":checkbox").prop("checked"));
        console.log($(":button").prop("index"));
        console.log($(":button").attr("index"));

        // 设置属性 
        // console.log($(":checkbox").attr("checked",true));
        console.log($(":checkbox").prop("checked",""));     
        $(".box").toggleClass("box1");
    })
    $("p").html("Hello <b>world</b>!");
    $("p").text("Hello <b>world</b>!");
    $("input").val("Helloworld!");
    var p = $("p:first");
    var position = p.position();
    $("p:last").html( "left: " + position.left + ", top: " + position.top );
    $(".content").css("position","absolute");
    $(".content").css("left",100);

移交$使用权

正常情况下$代表的是JQ如果和其他变量名有冲突，JQ就会把$的使用权交出去，以后就不能用$代表JQ了
用变量接受返回值后，这个变量就是JQ
var $$=$.noConflict();

JQ事件绑定

事件绑定

$("div p:first-child:first").click(function(){
    alert("哈哈哈哈")
})

on是绑定事件，四个参数 div.on("type","selector",obj,fn)

• type字符串类型，放的是事件类型
• selector字符串类型，是选择器，代表过滤，只有这个选择期内的元素才能触发事件
• obj字符串类型，给事件传的参数
• fn函数，事件触发后执行的函数

off解除绑定时间

• div.off();//移除所有类型的事件
• div.off("click");//移除所有类型的点击事件
• div.off("click",fn);//移除指定的点击事件
• div.one()绑定一次的点击事件，只能点一次

for in可以遍历对象，遍历对象的时候可以得到对象的所有属性名，遍历数组得到的是下标

var arr=["hello","old","are","you"];
for(index in arr){
    console.log(index)
    console.log(arr[index])
}
var obj={name:"明月",age:18}
for(key in obj){
    console.log(key,obj[key])
}

JQ里面的遍历对象each

  $("p").each(function(index,obj){
    // 遍历$("p")这个集合，
    // 得到下标和每一个p标签obj
    
        console.log(index,obj.innerText)
    

})
$("p").each(function(index,obj){
    $(this).click(function(){
        console.log(index,this.innerText)
    })
})