`

jQuery-基础

 
阅读更多

HTML 页面组成: 

基本的标签 + 样式 + 行为

markup : HTML标签

style   : 样式,CSS 

script  : 行为,jQuery

 

Write less, do more!

 

var checkedValue = jQuery('input:radio[name="someRadio"]:checked').val();

 

 

你需要什么功能? 

页面事件处理

数据校验-获取不同标签的值

异步请求后台获取数据

 

jQuery能提供给你哪些功能?

Event事件处理

selector选择器定位元素并取值

Ajax,get,post

 

Just begin

 

self-named: jQuery

alias: $

 

Unobtrusive JavaScript 非侵入式的脚本-不要把脚本写在标签上,而应该分离。

achieving better page organization and increased code versatility. 

就像CSS样式表一样,将标签和样式分离开,这样管理起来更加方便,也更清晰,更加合理

 

Separating style from structure  : use CSS

Separating behavior from structure : use jQuery

 

Make sure that the button element exists before we attempt to augment it

 

 

1.x and 2.x , download which ?

从2.0开始,jQuery只关注未来的趋势,而不会兼顾老版本浏览器IE6,IE7,IE8

因此,jQuery将删除那些处理浏览器兼容性的代码,使得代码量减少了12%左右,而且更快

 

如果需要支持IE8以下的浏览器,只能选择1.x版本

 

 

compressed or uncompressed ?

生产上使用compressed,因为体积更小

测试使用uncompressed,因为格式化了,可读性好

 

 

use CDN to include jQuery in our web pages 

 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 

<!-- 如果下载失败,则引入自己的js -->

<script>window.jQuery || document.write('<script src="javascript/jquery-1.11.0.min.js"><\/script>');</script>

 

 

jQuery对象

//expose jQuery to the global object as usual 

window.jQuery = window.$ = jQuery; 

 

GitHub

 

jQuery’s modules

ajax: Contains all the Ajax functions like ajax(), get() and post(). 

effects: Contains the methods that allow animations like animate() and slideUp(). 

event: Contains the methods to attach event handler to the browser events like on() and off(). 

 

jQuery fundamentals

jQuery focuses on retrieving elements from HTML pages and performing operations upon them.

致力于通过选择器获取元素,并在这些元素上施加行为

selectors

by type : input 

by attributes : [name='xxx']

by position: parent child

 

You must waiting until the page is loaded before performing page operations,

 

The jQuery library is exposed through a property called jQuery and a shortcut called $. \

Using them we have access to the properties and the methods .

 

jQuery's utilities or jQuery utility methods

使用jQuery工具箱中的方法

var trimmed = $.trim(someString); 

$.trim() 去除字符串两端的空格

$.isArray()  测试参数是否为数组类型

注意:这些方法实际上是$()function中的方法(JavaScript中,方法中可以在定义方法)

 

jQuery chaining: a programming technique to call several methods in a single statement.

var obj = new Obj(); 

obj.method().anotherMethod().yetAnotherMethod(); 

 

select elements from the DOM 

two parameters: a selector and  a context(optionally).

通过context的设置,可以

 

 

XML might be familiar with XPath as a means to select elements within an XML document.

jQuery中的选择器类似与通过XPath解析XML中的节点

 

find all the <p> contained in a <div>. Contained doesn't mean the <div> is the parent of the <p>, it can also be a generic ancestor.

首先根据指定的context定位元素,然后再根据selector进行查询

var paragraphsInDiv = = jQuery("p", "div"); 

var paragraphsInDiv = = $("p", "div");

 

查询器将返回的数据封装为一个数组并在此基础上进行包装,并提供一系列的方法来处理这个对象

术语叫做jQuery wrapper or wrapped set

 

jQuery wrapper methods, is that when they’re done with their action (like a hide operation),

they return the same group of elements, ready for another action. 

当处理完一个方法后,会返回同样的数据集,以便对其调用其他function

 

 

A better place to put code using jQuery

The document ready handler

Traditionally: 

window.onload=funciton(){//do stuff here}

需要等待DOM tree构建完成,以及其它资源(image,flash,etc)被加载并呈现到窗口之后,才会触发window.onload事件

 

jQuery way:

jQuery provides a simple means to trigger the execution of code once the DOM tree has loaded (only waiting the DOM,without waiting for external resources)

jQuery(document).ready(handler);

 

$(handler);

 

jQuery(document).ready(function() { 

// your code goes here... 

});

 

jQuery(function() { 

// your code goes here... 

});

 

Best practices:

put the libraries included in your page before the closing <body> tag!

At that point, all of the other elements are already in the DOM. 

So you can completely avoid the use of $(document).ready .

把<script>放到</body>标签签名,将其作为DOM的一部分

 

 

 

As we’ve seen, the jQuery() function can be used to do the following: 

• Select and wrap DOM elements to be operated upon by wrapper methods  选择得到结果,对结果进行包装,提供包装后的方法对结果进行处理

• Serve as a namespace for global utility functions  提供全局工具方法

• Establish code to be executed when the DOM is ready for manipulation 文档加载完毕才开始对元素进行操作

 

 

 

 

分享到:
评论

相关推荐

    jquery-1.7.2.js免费下载

    该版本在1.7.1的基础上修复了大量的bug,并改进了部分功能。而相比于1.7.2 RC1,只修复了一个bug。值得注意的是:如果你正在使用jQuery Mobile,请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本,因为之前的...

    jquery-migrate-3.4.0.min.js

    jquery-migrate.min.js是一个过渡插件,让你在不修改原有代码的基础上升级或降级jQuery版本,使其自动匹配代码所需要的jquery版本

    jquery-ui-1.10.4.custom

    jQuery UI 则是在jQuery 基础上开发的一套界面工具,几乎包括了网页上你所能想到和用到的插件以及动画特效。

    jquery-3.3.1资源包

    jquery-3.3.1源码及压缩版的jquery-min-3.3.1,jquery基础源码工具集合,看到有些黑心作者标30C币,看不下去了,公用的技术标天价,呵呵,想免费分享,奈何最低只能选1,将就着用吧

    第一章-JQUERY-基础

    NULL 博文链接:https://fangyong2006.iteye.com/blog/707810

    jquery-ui-1.9.1.custom

    jquery-ui-1.9.1.custom 非常实用 在jQuery基础上进行封装更加漂亮

    jQuery基础教程+锋利的jQuery+源代码+jquery1.7.2中文API+jquery-1.7.2.min.js.rar

    jQuery基础教程+锋利的jQuery+源代码+jquery1.7.2中文API+jquery-1.7.2.min.js.rar

    jquery-ui-datepicker加入时分秒 jquery.easyui时分秒

    源码修改!绝对原创!不粘贴复制!实现日期时间框,支持中文格式! 扩展了jquery-ui-datepicker的功能。在jquery easyui datetimebox 基础上汉化,并且添加一种jquery方式调用。强化了my97的onclick事件。

    jquery-ui-1.9.2.custom

    1.9.2版本UI类库 jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

    jquery-ui.min.js

    jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

    jquery-ui-1.8.16.custom

    JqueryUi使用例子。jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件

    jquery-ui.css

    jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容

    jquery-easyui-1.2

    jquery-easyui-1.2.3jquery easyUi是在jquery的基础上封装了一套UI...详细说明:jquery easyUi是在jquery的基础上封装了一套UI插件-jquery easyUi ...

    jquery-jtemplates

    用于web开发中前端数据绑定。jtemplate是在jquery的基础上实现的,所以脚本的引入顺序不能颠倒,否则会报错。

    jquery-multi-check-selectbox.rar

    在fSelect.js基础上修改的一个下拉框多选,多一个全部选项,当选中全部时都打勾

    根据自己需求,再jquery-confirm基础上做了些小修改

    原说明可以参考jquery-confirm官方文档 ---------我的修改--------- 1、窗体增加id选项,默认不加 2、回调增加setId选项,默认不加 3、按钮增加可设置id选项,默认不加 ---------使用方式--------- 1、confirm初始化...

    jQuery 1.7.2 正式版, jquery 1.7.2 min.js

    该版本在1.7.1的基础上修复了大量的bug,并改进了部分功能。而相比于1.7.2 RC1,只修复了一个bug。值得注意的是:如果你正在使用jQuery Mobile,请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本,因为之前的...

    jquery-easyui-1.4.5 demo带索引及中文api

    jquery-easyui-1.4.5 demo带索引及中文api,在官方基础上添加索引

    jquery-ui-1.8.6

    jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

    jQuery-入门.pdf

    jQuery-入门.pdf

Global site tag (gtag.js) - Google Analytics