jquery_01笔记

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的最后一个元素

//...................太多了~用时再找