今天学习了jQuery,内容非常多。因为有详尽的参考手册,所以就不一一列举所有内容了。只挑重要的,常用的,整理一下。
(为了方便,以下jQuery全部简写成jq)
1 jq的安装
1.1网页中添加 jQuery
1)从 jquery.com 下载 jQuery 库
2)从 CDN 中载入jQuery
使用 BootCDN、百度、又拍云、新浪、谷歌或微软的 jQuery,有一个很大的优势:
许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。
1.2引用位置
要把jq库文件放在最前面,然后才能使用jq的代码
2 jq和原生js的区别
主要体现在dom操作
基础语法是相同的,jq只是简化了js
3 文档就绪事件
相当于window.onload
$(document).ready(function(){ // 开始写 jQuery 代码... });
$(function(){ // 开始写 jQuery 代码... });
第二种代码简单,比较常用
4 dom操作(和原生js作对比说明)
4.1返回对象的区别:
Js返回的是js对象
Jquery返回的是jquery对象
实例说明:
$(function(){ var obj_js=document.getElementById('obj'); console.log(obj_js); var obj_jq=$('#obj'); console.log(obj_jq); });
因为两者对象不同,也决定了其属性、方法,等一系列的都不同。所以要区别好,分清这一点,接下来的操作就容易多了。
4.2 Js对象和jquery对象转换
对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQuery 对象了,使用[index]和.get(index)可以转为DOM对象
例1:
js对象转化成jq对象: $(js)
jq对象转化成js对象: $(‘#dd’)[0] 或 $(‘#dd’).get(0)
例2:
$(‘div’).each(function(){
this.innerHTML //可以用,因为this是js对象
this.html(); //不可以用,因为html()是jq的方法,而this是js对象
$(this).html(); //可以用,因为$(this)是jq对象
});
4.3 选择器
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
jQuery找到原素的方式, 比原生js更方便,更强大。
1)元素选择器
2)#id 选择器
3).class 选择器
4.4 操作原素
4.5 其他常用(查看手册即可)
1)each()
相当于for循环
2)prop()和attr()的区别
http://www.365mini.com/page/jquery-attr-vs-prop.htm
3)offset()
在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。
4)eq()
返回带有被选元素的指定索引号的元素,返回的是一个jquery对象
5)文档处理
6)筛选
7)事件
8)效果
9)回调函数