jQuery编程中的一些核心方法简介
前端之家收集整理的这篇文章主要介绍了
jQuery编程中的一些核心方法简介,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_0@调用 jQuery 对象的方法很简单:
<div class="jb51code">
<pre class="brush:js;">
$('h1').remove();
@H_
301_0@大多数 jQuery
方法都是像上面这样被
调用的,这些
方法都位于 $.fn 命名空间内,这些
方法称为 jQuery 对象
方法。
@H_
301_0@但是也有一些
方法不需要依赖于选择器的结果集,这些
方法位于 jQuery 命名空间内,这些
方法称为 jQuery 核心
方法。如果觉得不好理解,记住下面两条即可:
- 所有 jQuery 选择器的方法都位于 $.fn 命名空间内。
- $ 内的方法一般都是一些实用的功能性方法,这些方法不依赖选择器,这些方法的参数和返回值也都大不相同。
@H_
301_0@有些对象
方法跟核心
方法的
名称还会相同,例如 $.fn.each 和 $.each,使用的时候需要格外注意。
@H_
301_0@jQuery 的 $ 命名空间中提供了很多实用
方法:
@H_
301_0@
去除字符串两遍的空白:
@H_
301_0@对数组和对象进行迭代:
$.each({ foo : 'bar',baz : 'bim' },function(k,v) {
console.log(k + ' : ' + v);
});
@H_
301_0@返回数组中某元素的索引,如果元素不存在则返回 -1
if ($.inArray(4,myArray) !== -1) {
console.log('找到了');
}
@H_
301_0@用一个对象去扩展另外一个对象:
var newObject = $.extend(firstObject,secondObject);
console.log(firstObject.foo); // 'baz'
console.log(newObject.foo); // 'baz'
@H_
301_0@如果不想改变第一个对象中的值,在 $.extend 的第一个参数中传入一个空对象即可:
var newObject = $.extend({},firstObject,secondObject);
console.log(firstObject.foo); // 'bar'
console.log(newObject.foo); // 'baz'
@H_
301_0@改变
函数的作用域:
myFunction(); // logs window object
var myProxyFunction = $.proxy(myFunction,myObject);
myProxyFunction(); // logs myObject object
@H_
301_0@再结合事件看如何改变
函数的作用域:
$('#foo').click(myObject.myFn); // logs DOM element #foo
$('#foo').click($.proxy(myObject,'myFn')); // logs myObject
@H_
301_0@JavaScript 本身有类型检测的
方法,jQuery 中也有,并且做得更好:
// 用 JavaScript 的 typeof 操作符来判断类型
typeof myValue == 'string'; // false
typeof myValue == 'number'; // false
typeof myValue == 'undefined'; // false
typeof myValue == 'boolean'; // false
// 用恒等于 检测 null
myValue === null; // false
// 使用 jQuery 的方法来判断类型
jQuery.isFunction(myValue); // false
jQuery.isPlainObject(myValue); // false
jQuery.isArray(myValue); // true
@H_
301_0@向 HTML 元素
添加额外的数据:
@H_
301_0@所要
添加的数据可以是任意类型:
// 不需要再去找那些 div 了;
// 可以直接从 list 中读取出来
var $firstLi = $('#myList li:first');
$firstLi.data('contentDiv').html('new content');
@H_
301_0@