jQuery

今天学习了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

文档就绪事件

  相当于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  //可以用,因为thisjs对象

  this.html();  //不可以用,因为html()jq的方法,而thisjs对象

  $(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)回调函数

原文地址:https://www.cnblogs.com/hzhjxx/p/9760912.html