给页面增加动态功能的工作流模式：选择一个元素或一组元素，然后以某种方式对其进行操作。

利用原始的JavaScript完成这些任务中的任何一个，都会需要数十行代码，JQuery让这些常见的任务变得简单

行为与结构相分离被称为“不唐突的JavaScript”，将行为与结构分离。任何嵌入在HTML页面<body>里的JavaScript表达式或语句，不管是作为HTML元素的特性，还是嵌入在页面<body>的脚本块里，都是不正确的。

<head>

<script type='text/javascript'>

window.onload = function(){

document.getElementById('xxx').onclick = function

...

}

</script>

</head>

不唐突的Javascript要求客户端脚本遵守某些规则，并且应用好的编码模式。

JQuery：使得在页面编程中使用不唐突的JavaScript技巧成为简单快乐的事儿，而无需耗费大量精力写大块代码。我们将发行有效地使用jQuery，可以编写更少的代码在页面上实现更多的功能。

JQuery重点放在从HTML页面获取元素并对其进行操作。利用jQuery，能够利用现有知识去发挥选择权的威力。

JQuery把确保代码能跨越所有主要浏览器以一致的方式工作，摆在了高优先级的位置。

1.JQuery包装集：

收集一组元素：$(selector) or jQuery(selector)

$()函数返回特别的JavaScript对象，它包含着与选择器相匹配的DOM元素的数组。该对象拥有大量预定义的有用方法，能够作用于该组元素。 称为包装器或包装集 （用扩展功能来对匹配的元素进行包装）。能够在其上用JQuery定义的方法去操作的，匹配元素的集合。

经常作为JQuery命令引用的许多方法的显著特征是，当完成了一个操作时，它们返回相同的一组元素，提高给下一个操作。（命令链）。因为每个函数都作用在与最初的选择器相匹配的全部元素之上，所以没有必要循环遍历元素数组。

2.实用工具函数

还有一些必须做的事情，并不涉及DOM元素。$ 是几个通用的实用工具函数的命名空间前缀。

文档就绪处理程序：

不唐突的JavaScript，行为从结构里分离出来了。因此，执行对页面元素的操作时在创建页面雨伞的文档标记之外，为了达到这个目的，在执行操作之前，要以某种方式等待，直到页面的DOM元素完全加载。window实例的onload处理程序是在整个页面加载之后执行，会受到一些限制，比如一个大的图片在加载。

等待文档结构被完成地解析，浏览器已经把HTML转换成了DOM树，执行代码：

$(document).ready(function(){ code})  <===> $(function(){code})

好处是，可以在同一个HTML文档中多次使用此技巧，并且浏览器按照函数在页面中定义的先后顺序，一一执行指定的函数。

3.创建DOM元素

通过给$()函数传递包含HTML标记的字符串，可以即时创建相应的DOM元素。$(“<p>dfsdf,/p>").通常，通过这种调用而创建元素层次结构之后，接着利用jQuery的一个DOM操作函数对其进行操作

4.扩展jQuery

通过扩展jQuery，可以利用它提供的强大的功能，特别是在元素选择方面。

$.fn.[funcname] = function(){ return this. 包装集 }

5.jQuery和其他库

导致冲突的库被加载之后的任何时刻，都可以调用：jQuery.noConflict() 把$还原到非jQuery 库所定义的含义.

回顾：

JQuery（）函数可以用于执行的任务：

JQuery实践--Why JQuery的更多相关文章

  1. JQuery 实践--扩展JQuery

    Why扩展JQuery通过扩展可以利用JQuery所提供的现有代码基础.避免从头编写代码 有效扩展JQuery的规则扩展JQuery的两种形式: $上直接定义实用工具函数 和JQuery包装集进行操作 ...

  2. jQuery实践树(2)

    上一个实践主要对jquery的ready事件进行.本实践要来使用jQuery改变页面的背景图片.可以先试试效果:http://hovertree.com/texiao/jquerytree/2/ 当你 ...

  3. jQuery实践-别踩白块儿网页版

    ▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...

  4. jquery实践

    转:http://www.cnblogs.com/Wayou/p/jquery_best_prictise.html jQuery编程的最佳实践   好像是feedly订阅里看到的文章,读完后觉得非常 ...

  5. Jquery实践--精读开篇

    JQuery实践,我已经看了最少三遍了.这里面的很多方法对我的工作很有帮助.但由于不是真的进行前端开发,所以JQuery中的很多功能也没有用到.所以隔一段时间想起,就会发觉,一些东西又忘记了.所以趁这 ...

  6. jquery实践案例--验证电子邮箱

    <input type="email" name="email" id="email" value="" onpa ...

  7. jquery实践案例--验证手机号码

    如果要做手机号的验证,那么我们需要知道手机号码的号段. 182 183 187 188 155 156 176 186 189 //移动运营商:170 移动: 2G号段(GSM):134-139.15 ...

  8. JQuery实践--实用工具函数

    实用工具函数,$命名空间的一系列函数,但不操作包装集.它要么操作除DOM元素以外的Javascript对象,要么执行一些非对象相关的操作. JQuery的浏览器检测标志可在任何就绪处理程序执行之前使用 ...

  9. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

随机推荐

  1. 车牌识别代码OpenCV

    #include<opencv2\opencv.hpp> #include<iostream> using namespace cv; using namespace std; ...

  2. php使用ffmpeg获取上传的视频的时长，码率等信息

    视频上传是程序员在很多时候需要用到的操作,然而上传完视频肯定要获得一些视频的详细信息,php本身是不支持信息获取的 ,所以采用ffmpeg第三方插件 首先你需要下载ffmpeg文件:官网地址:http ...

  3. GB2312、GBK、GB18030 这几种字符集的主要区别

    1 GB2312-80 GB 2312 或 GB 2312-80 是中国国家标准简体中文字符集,全称<信息交换用汉字编码字符集·基本集>,又称 GB 0,由中国国家标准总局发布,1981 ...

  4. go 通过赋值给 _ 来忽略序号和值

    go 语言中 只要想忽略的值都需要用 下划线 _ 来代替 package main import "fmt" func main() {     pow := make([]int ...

  5. flask返回自定义的Response

    from json import dumps from flask import Response from flask_api import status from protocol.errors_ ...

  6. 2019杭电多校一 K. Function (数论)

    大意: 给定$n(n\le 10^{21})$, 求$\sum\limits_{i=1}^n gcd(\lfloor\sqrt[3]{i}\rfloor,i)\mod 998244353$ 首先立方根 ...

  7. We Need More Bosses CodeForces - 1000E (无向图缩点)

    大意: 给定无向连通图, 定义两个点$s,t$个价值为切断一条边可以使$s,t$不连通的边数. 求最大价值. 显然只有桥会产生贡献. 先对边双连通分量缩点建树, 然后求直径即为答案. #include ...

  8. MySQL 常用函数介绍

    MySQL 基础篇 三范式 MySQL 军规 MySQL 配置 MySQL 用户管理和权限设置 MySQL 常用函数介绍 MySQL 字段类型介绍 MySQL 多列排序 MySQL 行转列 列转行 M ...

  9. （四）springmvc之获取servlet原生对象

    一.使用DI注入的方式 <a href="<%=request.getContextPath()%>/servletObj_1">DI注入的方式</a ...

  10. winform PictureBox图片上动态添加Label或其他控件

    效果图: 代码: //分页或者多次加载时,需要删除之前产生的lable等控件 ; tabID < ; tabID++) { foreach (Control control in this.ta ...