Day6 jQuery

元素的操作

dom对象和jQuery对象

dom对象:原生js获取节点

jQuery对象:通过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")

class的添加和删除

$("#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()简写形式$();

jQuery的事件

$("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("鼠标移出");
});

动画效果

显示和隐藏(slow  normal  fast    毫秒数)

$("[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());//前一个节点

json

JavaScript object notation: 是一种轻量级的数据交换格式。

     xml:格式非常严格(html),过多标签导致臃肿 

  json：传递键值对

   json的语法:

a)对象表示为键值对

b)数据由逗号分隔

c)花括号保存对象

d)方括号保存数组

   js的对象和json不是一回事。

    var person = {“name”:”zs”,”age”:12};

//相互转换
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+")"));