码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-20 13:34:17      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:color   表单   开源   动画   round   attr   ict   function   doc   

<!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>

  

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

标签:color   表单   开源   动画   round   attr   ict   function   doc   

原文地址:http://www.cnblogs.com/SunlikeLWL/p/7399703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!