jquery和dom的区别:
dom:
window.onload()方法:
1)必须等待网页中所有元素加载完毕后(包括图片)才能运行;
2)只能编写一个,不能别写多个
window.onload() = function(){
alert("hello world");
}
window.onload() = function(){
alert("hello world..................again");
}
运行结果为:hello world..................again;
jquery:
$(document).ready();
1)页面中所有dom元素绘制完成就执行,可能dom元素相关的东西还没有加载;
2)可以编写多个
$(document).ready(function(){
alert("jquery 模仿 window.onload() 方法.................");
});
$(document).ready(function(){
alert("jquery 模仿 window.onload() 方法.................again");
});
运行结果为:jquery 模仿 window.onload() 方法................., jquery 模仿 window.onload() 方法.................again;
3)有缩写形式
$(function() {
}
jquery和dom的相互转换:
//jquery转换dom
var $obj_query = $(#id) //query 对象
var obj_dom = $(#id)[0] //dom 对象
var obj_dom = $(#id).get(0) //dom 对象
//dom转换jquery
var obj_dom = document.getElementByid("id") //dom 对象
var $obj_query = $(obj_dom) //query 对象
事件放置位置:
如果是页面启动期间需要执行的动作,需要放在window.onload()方法里或者$(document).ready()方法里;
例如:
function div_onclick() { alert('div_onclick...............'); } window.onload = function () { /** * click 方法,模拟一次点击事件 * */ //匿名方法,马上调用 document.getElementById("div_first").click = function() { alert('hah..so easy!!!'); }() //调用预定义的方法 document.getElementById("div_first").click = div_onclick(); }
/** * 把事件放在里面是为了加载dom以后才有对象,否则为null */ $(function() { // alert('load over..............'); //预定义的事件 $('#div_second').click(function() { var dom = document.getElementById("div_second"); var context = $(dom).html(); alert(context) }) $('#div_second').blur(function() { var dom = document.getElementById("div_second"); var context = $(dom).html(); alert(context) }) //直接执行 if($('#tt').length == 0){ alert("没有id为tt的元素") } alert($('.div span').length); alert($('.div > span').length); })
二.jquery选择器
1)var obj_dom = document.getElementByid("id").style.color = 'red' //如果没有元素id = “id” 就会报错
$("#id").css("color","red") //即使没有元素id也不会报错
2)检查是否有某个元素
//错误写法
if($("#id")){
alert("存在。。。")
}
//正确写法
if($("#id").length > 0){
alert("存在。。。")
}
//转换为dom对象
if($("#id")[0]){
alert("存在。。。")
}
3)选择器
$("#id >div") 选取id为id的子类div
$("#id +div") 选取id为id的下一个div (同辈元素)
$(".one ~div") 选取class为one的后面所有div (同辈元素)
$(".one").siblings("div") 选取class为one的前后所有div (同辈元素)
$("div :first") 选取所有div的第一个元素
$("div :last") 选取所有div的最后一个元素
//...................太多了~用时再找