Day6 jQuery详解编程语言

//dom对象 
var oP = document.getElementById("p1"); 
console.log(oP); 
 
//jQuery对象(提供快捷的方法对该对象进行操作) 
var oP2 = $("#p1"); 
console.log(oP2); 
 
//dom对象转换为jQuery对象  $(dom) 
console.log($(oP).html()); 
 
//jQuery对象转换为dom对象 
console.log(oP2[0]); 
console.log(oP2.get(0));

//获取值 
console.log($("#p1").html());   //text() 
//修改 
$("#p1").html("bbb"); //text() 
 
//不需要转换 
console.log($("input:eq(0)").val()); 
$("input:eq(1)").val(); 
 
//涉及转换 
var aInput = $("input"); 
for(var i=0;i<aInput.length;i++){ 
    console.log($(aInput[i]).val()); 
} 
 
//设置value值 
$("input:eq(1)").val("bbb");

$("#p1").css("color","red").css("background","#ccc"); 
$("#p1").css({"color":"red","background":"#ccc"}); 
$("#p1").css("color")

//获取属性值   
console.log($("img:first").attr("src")); 
//设置属性值 
$("img:first").attr("src","img/pink.png")

$("#p1").addClass("green"); 
$("#p1").removeClass("green"); 
$("#p1").toggleClass("green");

$(document).ready(function(){ 
}); 
window.onload和$(document).ready()的区别 
1.    window.onload只出现一次; $(document).ready()可以出现多次。 
2.    $(document).ready()触发条件:等待整个界面的节点绘制结束;window.onload触发条件:整个界面的节点绘制渲染结束(图片，视频等全部加载完毕) 
3.    window.onload无简写形式; $(document).ready()简写形式$();

$("div:first").click(function(){ 
}); 
click():单击事件 
dblclick():双击事件 
mouseover():鼠标移入事件 
mouseout():鼠标移出事件

keydown():键盘按下事件 
keyup():键盘抬起事件 
keypress():可打印字符键盘按下事件 
 
$(function(){ 
    $(document).keydown(function(event){ 
        if(event.keyCode == 13){ 
            console.log(event.key); 
        } 
         
    }); 
     
    $(document).keypress(function(event){ 
        console.log(event); 
});

focus():获取焦点事件 
blur():失去焦点事件 
change():选择内容改变事件 
select():当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。 
submit():提交事件 
//元素中文本被选中 
$("#radio").select(function(){ 
    console.log("select"); 
}); 
//元素获取到焦点 
$("#radio").focus(function(){ 
    console.log("focus"); 
});

//事件绑定 
/*$("#btn").bind("click",function(){ 
    alert("aa"); 
});*/ 
$("#btn").on("click",function(){ 
    alert("aa"); 
}); 
//事件解绑 
//$("#bin").unbind("click"); 
$("#btn").off("click");

//事件切换 
$("#btn").hover(function(){ 
    console.log("鼠标移入"); 
}, 
function(){ 
    console.log("鼠标移出"); 
});

$("[hide]").on("click",function(){ 
            $("div").hide("slow"); 
}); 
                 
$("[show]").on("click",function(){ 
        $("div").show("slow"); 
}); 
toggle():切换

fadeIn() 
fadeOut() 
fadeToggle()

slidedown()  下拉 
slideUp()  上拉 
slideToggle()

1)    内部插入 
var oP = $("<p>hello</p>"); 
$("div").append(oP);   //向div追加p节点 
                 
var oP = $("<p>hello</p>"); 
oP.appendTo($("div"));   //将p节点追加到div 
                 
var oP = $("<p>hello</p>"); 
$("div").prepend(oP);    //向div前置插入p节点 
                 
var oP = $("<p>hello</p>"); 
oP.prependTo($("div"));   //将p节点前置插入到div 
 
2)    外部插入 
     before():前面插入 
     after():后面插入 
3)    包裹 
      wrap() 
4)    删除 
     remove() 
5)    克隆 
 clone() 
 
//获取子节点 
console.log($("div").children()); 
//获取父节点 
console.log($("#p1").parent()); 
console.log($("#p1").parents()); 
console.log($("#p1").parentsUntil("body")); 
console.log($("#p1").next());//后一个节点 
console.log($("#p1").prev());//前一个节点

//相互转换 
var  jsObj = {"name":"zs","age":12}; 
var jsons = JSON.stringify(jsObj);//对象转换为json字符串 
                 
var json = '{"name":"zs","age":12}'; 
//转换json字符串为js对象 
//console.log(JSON.parse(json)); 
console.log(eval("("+json+")"));