jQuery学习备忘

jQuery对象转换成DOM对象

var #cr = $("#cr");  //jQuery对象
var cr = $cf[0];      //DOM对象
alert(cr.checked)    //检测这个checkbox是否被选中了

或者

var #cr = $("#cr");      //jQuery对象
var cr = $cf.get(0);     //DOM对象——通过jQuery本身的get(index)方法
alert(cr.checked)        //检测这个checkbox是否被选中了

DOM对象转换成jQuery对象

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

//是否被选中
$cr.is(":checked"));     //jQuery
cr.checked;              //javascript

var $t_a = $('.test :hidden');    //带空格的
//选取class为“test”的元素里面的隐藏元素。

var $t_a = $('.test:hidden');    //不带空格的
//选取隐藏的class为“test”的元素。

---

事件对象的属性：

　　1、event.type　　该方法的作用是可以获取到事件的类型；

　　2、event.preventDefault()　　该方法的作用是阻止默认的事件行为；

　　3、event.stopPropagation()　　该方法的作用是阻止事件的冒泡（jQuery对其重新封装，使IE也能支持）；

　　4、event.target　　该方法的作用是获取到触发事件的元素；

　　5、event.relatedTarget　　W3C在mouseover和mouseout这两个触发的事件对象里添加了一个叫relatedTarget的属性，来表示与事件相关的DOM元素。mouseover中relatedTarget指向鼠标来自的元素，而mouseout中的relatedTarget指向的是鼠标去向的那个元素。jQuery中，reatedTarget与其作用相同，只用在mouseover和mouseout事件中，且relatedTarget是一个对象属性，不是一个函数（方法），不能调用。

　　6、event.pageX和event.pageY　　该方法的作用是获取到光标相对于页面的x坐标和y坐标；

　　7、event.which　　该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件中获取键盘的按键；（1=左，2=中，3=右）

　　8、event.metaKey　　该方法的作用是为键盘事件中获取<ctrl>按键。

---

在之前的jQuery版本中，都是使用attr()来访问对象的属性，比如取一个图片的alt属性，就可以这样做$('#img').attr('alt')；但是在某些时候，比如访问input的disabled属性的时候，会有些问题。在有些浏览器里，只要写了disabled属性就可以，有些则要写：disabled="disabled"。所以，从1.6版开始，jQuery提供新的方法prop()来获取这些属性。使用prop()的时候，返回值是标准属性：true/false，比如$('#checkbos').prop('disabled')，不会返回“disabled”或者“”，只会返回true/false。当然赋值的时候也是如此。这样，便统一了所有操作，无论是从语法上还是语义上。

那么，哪些属性应该用attr()访问，哪些应该用prop()访问呢？

第一个原则：只添加属性名称该属性就会生效应该使用prop()；

第二个原则：只存在true/false的属性应该使用prop()。

比如：如果是设置disabled和checked这些属性，应使用prop()方法，而不是使用attr()方法。

---

$.ajaxPrefilter(function (options) {
    options.global = true;//Ajax不触发全局事件
});

//
$("#loading").ajaxStart(function () {
    $(this).show();
});
$("#loading").ajaxStop(function () {
    $(this).hide();
});

页面加载时，可多次触发的方法：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}

在元素后添加

function insertAfter(newElement, targetElement) {
    var parentElement = targetElement.parentNode;
    if (parentElement.lastChild == targetElement) {
        parentElement.appendChild(newElement);
    } else {
        parentElement.insertBefore(newElement, targetElement.nextSibling);
    }
}