Jquery常用的方法汇总_H5之家 - 中国HTML5教程资源分享第一站

//jQuery的优点 :

        1 轻量级
        2 强大的选择器
        3 出色的DOM操作的封装
        4 可靠的事件处理机制
        5 完善的Ajax
        6 不污染顶级变量
        7 出色的浏览器兼容性
        8 链式操作方式
        9 隐式迭代
        10 行为曾与结构层的分离
        11 丰富的插件支持
        12 完善的文档
        13 开源

// window.onload : $(function(){ })
$(function(){ }) 就相当于 js 中的window.onload事件一样,是在页面加载完成后,立刻执行的    只有这个和window.onload一样
    不过window.onload只能写一个但是$(function(){ })可以写多个
        没有简写的时候是 $(document)ready(function(){ })

//链式操作风格 :

$(".level1>a").click(function(){ $(this).addClass("current") //给当前元素添加"current"样式 .next().show(); //下一个元素显示 .parent().siblings()//父元素的同辈元素 .children("a") //子元素<a> .removeClass("current")//移出"current"样式 .next().hide();//他们的下一个元素隐藏 return false; })

//jQuery对象转成DOM对象 :

1 jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象

var $cr = $("#cr");//jQuery对象
var cr = $[0]; //DOM对象

2 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象

var $cr = $("#cr");//jQuery对象
var cr = $cr.get(0);//DOM对象

//DOM对象转成jQuery对象 :

对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了.
方式为 : $(DOM对象);

var cr = document.getElementById("cr");//DOM对象
var $cr = $(cr); //jQuery对象

//解决冲突 :

1 如果其他JS库和jQuery库发生冲突,我们可以在任何时候调用 : jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库

var $jaovo = jQuery.noConflict(); $jaovo(function(){ $jaovo("p").click(function(){ alert($jaovo(this).text()); }); });

2 可以直接使用"jQuery"来做一些jQuery的工作

jQuery(function(){ jQuery("p".click(function(){ alert(jQuery(this).text()); })); });

//jQuery选择器

1 基本选择器
基本选择器是jQuery中最常用的选择器,也是最简单的选择器,他通过元素id、class 和标签名等来查找DOM元素

//jQuery :

只要获得标签对象 . 就是数组

//jQuery对象获取 :

    $("p");//获取所有p标签对象 ---- 获取的对象是数组
    $("#aa");//获取id为aa的那个标签的对象 --- 获取的对象是数组
    $(".aaa");//获取class为aaa的那个标签的对象 --- 获取的对象是数组

//jQuery对象和DOM对象的转换 :

    jQuery的方法和DOM的方法不能互相使用(调用),但是对象可以互相转换
    $("p");//是jQuery对象
    document.documentElementsTagName("p");//是DOM对象
    $(document.documentElementsTagName("p"));//把DOM对象转换成jQuery对象
    $("p").get(1);//是一个DOM对象,
    get(1);代表p这个数组的第二位,(下标为1 就是第二位)
    $($("p").get(1));//是jQuery对象转成

//jQuery对象转成DOM对象 :

    1 jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象
        var $cr = $("#cr");//jQuery对象
        var cr = $[0]; //DOM对象
    2 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象
        var $cr = $("#cr");//jQuery对象
        var cr = $cr.get(0);//DOM对象

//DOM对象转成jQuery对象 :

对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了.
方式为 : $(DOM对象);

var cr = document.getElementById("cr");//DOM对象
var $cr = $(cr); //jQuery对象

//创建元素 :