现在的位置: 首页 > 综合 > 正文

jQuery study note 1

2017年12月26日 ⁄ 综合 ⁄ 共 2359字 ⁄ 字号 评论关闭
jQuery

1 关于text(),返回选择元素结果集,实际就是该jq obj对象内的html可视内容;

2 关于选择器。大部分时间,都把jQuery() or $(),用作选择器,实际上,配合appendTo(),还可以实现动态创建元素,如

$('<div>I am a div element</div>').appendTo('body');

这里创建后,新元素处于body 元素的最后。

3 查看当前jQuery版本号:$.fn.jquery;$().jquery;jQuery.fn.jquery;jQuery().jquery。

4 $在非正常的dom 文档模型下是会出现异常的,所以,建议使用html5的文档模型

<!DOCTYPE html>

5 何时引入jquery脚本。从1.3起,ready()并不能保证当前所有的css文件都已经被加载,所以,如果使用1.3以后版本的jquery,须在引入脚本前引入所有css文件。

6 关于文档是否准备好,以下三个用法,标明了dom加载状态,主要是由于事件window.onload是否执行的缘故。文档加载完成,并不代表window加载完成。

jQuery(document).ready(function(){
     alert('DOM is ready!');
});
jQuery(function(){
     alert('No really, the DOM is ready!');
});
jQuery(function($){
    alert('Seriously its ready!');
});

所以,在使用的时候,要注意区别,根据实际环境来使用。

7 关于引入脚本的非压缩版本和压缩版本的区别。当开发时,使用非压缩的,有助于调试错误,而生产环境,则使用压缩的,加快页面加载速度。如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

8 load()与unload()。当window加载完成时,使用load()执行脚本,当用户离开也即关闭页面是,使用unload()执行脚本。如下:

jQuery(window).load(function(){alert('Window already loaded!');});
jQuery(window).unload(function(){alert('Bye now!');});

注意,这里的load()和ajax的load()是不同的表现。

9 jquery 对象链。使用完jQuery的一个方法后,返回的依旧是一个jquery对象。

10 匿名函数,jQuery的别名$。如下(不会存在冲突):

(function($){})(jQuery);
(function(){})();

11 end()的用法。释放距离最近的一个选择器所返回的对象,返回上一级选择器返回的对象。如下:

(function($){
$('#list') // Original wrapper set
    .find('> li') // Destructive method
        .filter(':last') // Destructive method
            .addClass('last')
        .end() // End .filter(':last')
        .find('ul') // Destructive method
            .css('background', '#ccc')
                .find('li:last') // Destructive method
                    .addClass('last')
                .end() // End .find('li:last')
        .end() // End .find('ul')
    .end() // End .find('> li')
.find('li') // Back to the orginal $('#list')
    .append('I am an <li>');

})(jQuery);

12 jQuery函数的多面性。选择、创建、ready()时间的捷径。如下:

jQuery(function($){ // Pass jQuery a function
// Pass jQuery a string of HTML
$('<p></p>').appendTo('body');
// Pass jQuery an element reference
$(document.createElement('a')).text('jQuery').appendTo('p');
// Pass jQuery a CSS expression
$('a:first').attr('href', 'http://www.jquery.com');
// Pass jQuery DOM reference
$(document.anchors[0]).attr('jQuery');
});

13 this和$(this)的区别。当你的脚本里当前对象唯一时,使用两者皆可。如果使用each(),对象在变化中,则需要使用$(this)来获取动态的当前对象。

14 获取对象集中的某一个顺序元素对象,有三种方法:

$('a').[0];
$('a').get(0);
$('a').eq(0);

注意,其中,[0]、get(0)返回的为dom对象,而非jQuery对象,而eq(0)则返回jQuery对象,可以继续进行jQuery链操作。

15 元素属性设置。一般使用attr('a', 'b')的形式,但是,还可以使用如下方式,只是,只适用于html存在的属性。

$('a')[0].target = '_self'

16 (今天就note到这里)

抱歉!评论已关闭.