锋利的jQuery-----读书笔记

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
    <title>锋利的jquery</title>
    <script type="text/javascript" src=‘js/jquery-2.2.1.min.js‘></script>
   <style type="text/css">
   	body{
   		background-color: gray;
   	}
   </style>
</head>
<body>
<a href="#">提交</a>
 <script type="text/javascript">

 /*
   1.2.2、jquery优势
   1、轻量级
   2、强大的选择器
   3、出色的DOM操作封装
   4、可靠的时间处理机制
   5、完善的Ajax
   6、不可污染顶级变量
   7、出色的浏览器兼容性
   8、链式操作方式
   9、隐式迭代
   10、行为层与结构层的分离
   11、丰富的插件支持
   12、完善的文档
   13、开源

    1.3.2
    ready:等待DOM文档加载完毕
    onload : 等待网页所有内容加载完毕后,包括图片

    1.4.2DOM对象jQuery对象转换

    var $cr = $("#cr");//jQuery对象

    var cr = $cr.get(0);// DOM对象

    var $cr = $(cr);

    //平时使用的jQuery函数都是$()函数制造出来的,$()是JQuery的一个制造函数

1、认识jQuery
    1.5解决jQuery和其他库的冲突

    jQuery.noConfict();
    //将变量$的控制权移交给其他的Javascript库

2、jquery选择器
    a、基本选择器 p
    b、层次选择器 p~span
    c、过滤选择器
       基本过滤选择器:first
       内容过滤选择器:contains
       可见性过滤选择器:hidden
       属性过滤选择器:attr=
       子元素过滤选择器:first-child
       表单对象过滤选择器:select:selected

 3、DOM操作
     1、document.forms;//提供了一个forms对象
     2、删除节点
        detach:将所有匹配的元素从DOM中去除,
       这个方法不会把匹配的元素从jQuery对象中去除,
       因而可以在将来再使用的时候用到这些匹配的元素,
       所有绑定的事件、附加的数据等都会保留下来
       empty:清空所有后代节点
       remove:删除节点
     3、wrapAll包在外面
        wrapInner包在里面
     4、遍历节点
        childent();
        next();
        prev();
        siblings();
        closest();//获取最近的元素

    5、offset当前窗口的相对偏移量
       scrollTop获取元素的滚动条到顶端的距离

 4、jQuery中的时间和动画
    1、时间绑定bind
    2、合成时间toggle
    3、事件冒泡:事件会像水泡一样不断向上直至顶端
    同时给a和body绑定不同事件
		$("a").click(function(){
			  console.log("a");
		})

		$("body").click(function(){
			console.log("body");
		})

		$(window).click(function(){
			  console.log("window");
		})

		//点击小范围的同时会触发大范围的事件

 */

 </script>
</body>
</html>

  

时间: 2024-10-05 05:25:56

锋利的jQuery-----读书笔记的相关文章

锋利的jQuery读书笔记---选择器

前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所以笔记和代码也就写到一起了.下面是选择器的记录: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <script type="t

锋利的jQuery读书笔记 第6章、第9章 第10章

第六章 Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体.使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验. 一.Ajax的优势和不足 (1)优势主要以下几点: 1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可) 2.用户体验极佳(不刷新页面即可获取可更新的数据) 3.

锋利的jQuery读书笔记 第1章、第2章

第一章 一.常见的JavaScript类库 1.Prototype 2.Dojo 3.Yui 4.Ext JS 5.MooTools 6.jQuery 二.jQuery对象和DOM对象 1.DOM对象 文档对象模型,每一份DOM都可以表示成一颗树. 2.jQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象. (1)jQuery对象是jQuery对象独有的.如果一个对象是jQuery对象,那么就可以使用jQuery对象里的方法. (2)在jQuery对象中无法使用DOM

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../

锋利的jQuery读书笔记 第7章、第8章

第七章 插件也成为扩展,是一种遵循一定规范的应用程序接口编写出来的程序.最新最全的插件可以从jQuery官方网站的插件板块中获取,网站地址为: http://plugins.jquery.com/ 一.插件的使用 1.jQuery表单验证插件—Validation 简介:Validation是历史最有的插件之一.拥有以下特点 (1)内置验证规则 (2)自定义规则验证 (3)简单强大的验证消息提示 (4)实时验证 使用: (1)引入jQuery库和Validation插件 (2)确定哪个表单需要被

锋利的jQuery读书笔记---jQuery中操作DOM

一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创建文本节点 创建属性节点 插入节点 插入节点的方法 方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码:$("p").append("<b>你好</b>"

锋利的jQuery读书笔记 第11章

第十一章 一.jQuery性能优化 1.使用最新版本的jQuery类库 2.使用合适的选择器 3.缓存对象 4.循环操作DOM时,尽可能减少DOM操作 5.建议使用简单for()或者while()循环来出处理,而不是$.each() 6.使用事件代理 7.将你的代码转化成jQuery插件 8.使用join()来拼接字符串 9.合理利用HTML5的Data属性 10.尽量使用原生的JavaScript方法 二.jQuery技巧 参考书p318

锋利的jQuery读书笔记 第3章、第4章 第5章

第三章 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M” .页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作.一.创建节点      为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点.      var box = $('<div id="box">节点</div>'); //创建一个

锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">&l

锋利的jQuery读书笔记---jQuery中动画

jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">