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