IT虾米网

Day6 jQuery详解

xmjava 2018年06月25日 编程语言 117 0

元素的操作

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+")"));

 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Day5 JavaScript(三)事件、表单验证以及初识jQuery详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。