JQuery实践--Why JQuery
给页面增加动态功能的工作流模式:选择一个元素或一组元素,然后以某种方式对其进行操作。
利用原始的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的更多相关文章
- JQuery 实践--扩展JQuery
Why扩展JQuery通过扩展可以利用JQuery所提供的现有代码基础.避免从头编写代码 有效扩展JQuery的规则扩展JQuery的两种形式: $上直接定义实用工具函数 和JQuery包装集进行操作 ...
- jQuery实践树(2)
上一个实践主要对jquery的ready事件进行.本实践要来使用jQuery改变页面的背景图片.可以先试试效果:http://hovertree.com/texiao/jquerytree/2/ 当你 ...
- jQuery实践-别踩白块儿网页版
▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...
- jquery实践
转:http://www.cnblogs.com/Wayou/p/jquery_best_prictise.html jQuery编程的最佳实践 好像是feedly订阅里看到的文章,读完后觉得非常 ...
- Jquery实践--精读开篇
JQuery实践,我已经看了最少三遍了.这里面的很多方法对我的工作很有帮助.但由于不是真的进行前端开发,所以JQuery中的很多功能也没有用到.所以隔一段时间想起,就会发觉,一些东西又忘记了.所以趁这 ...
- jquery实践案例--验证电子邮箱
<input type="email" name="email" id="email" value="" onpa ...
- jquery实践案例--验证手机号码
如果要做手机号的验证,那么我们需要知道手机号码的号段. 182 183 187 188 155 156 176 186 189 //移动运营商:170 移动: 2G号段(GSM):134-139.15 ...
- JQuery实践--实用工具函数
实用工具函数,$命名空间的一系列函数,但不操作包装集.它要么操作除DOM元素以外的Javascript对象,要么执行一些非对象相关的操作. JQuery的浏览器检测标志可在任何就绪处理程序执行之前使用 ...
- jquery学习笔记---jquery插件开发
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...
随机推荐
- 解决RabbitMQ消息丢失问题和保证消息可靠性(一)
原文链接(作者一个人):https://juejin.im/post/5d468591f265da03b810427e 工作中经常用到消息中间件来解决系统间的解耦问题或者高并发消峰问题,但是消息的可靠 ...
- 3种PHP实现数据采集的方法
https://www.php.cn/php-weizijiaocheng-387992.html
- JVM命令行参数解析
1. java命令行参数 先看java命令行的参数 solr@2f1fe8cc9f09:/opt/solr/server/solr-webapp/webapp$ java Usage: java [- ...
- 使用UTF8字符集存储中文生僻字
使用UTF8字符集存储中文生僻字 一.相关学习BLOG https://www.cnblogs.com/jyzhao/p/8654412.html http://blog.itpub.net/7818 ...
- (六)mybatis之多对一关系(简单)
一.需求分析 需求: 查询所有订单信息及订单下的订单明细信息 分析: 一条订单只能由一个消费者下单,但是一条订单有多条订单明细. 二.创建数据库表和实体对象 Customer.java ...
- java 框架-模板引擎FreeMarker
https://www.cnblogs.com/itdragon/p/7750903.html FreeMarker是一个很值得去学习的模版引擎.它是基于模板文件生成其他文本的通用工具.本章内容通过如 ...
- js移动端回退监听 popstate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- windows的一些常用指令
持续更新中..... 1.清除系统内 DNS 的缓冲 : nslookup baidu.com 2.修改hosts文件 : 位置 运行 -> C:/windows/system32/ ...
- vue中用解构赋值的方法引入组件
在一个组件中引入很多其他组件的时候会显得代码很臃肿,这个时候可以用es6的解构赋值的方法 在components中写入一个index.js文件 在该js文件中导出你想要引入的组件 再接着就可以在该组件 ...
- The openssl extension is missing, which means that secure HTTPS transfers are impossible
执行命令:curl -sS https://getcomposer.org/installer | php报错如下Some settings on your machine make Composer ...