jquery学习笔记

发表于   |   更新于 | 分类于 | | 阅读次数:   |   字数统计: 2,693

jquery简介

javascript的缺点

  1. 代码比较麻烦，需要遍历，可能还需要嵌套
  2. 找到对象麻烦，方法少，还长
  3. 会有兼容性问题
  4. js注册事件，会被覆盖，addEventListener

jquery的第一个程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//1.引入文件
<script src="jquery-1.12.4.js"></script>
<script>
//2.写入口函数
$(document).ready(function(){
  //注册事件，把on去掉，是一个方法
  $("#btn1").click(function(){
    $("div").show();
  });
  $("btn2").click(function(){
    //隐式迭代，jquery会自动遍历，不需要我们遍历
    $("div").text("我是内容");
  });
});

</script>

什么是jquery？

  jquery就是一个轻量级的js库，它有丰富的api可供调用，学习jquery其实就是学习jquery里的api。

jquery的版本问题

  • 1.x,2.x,3.x版本的区别
      1.x版本和2.x版本是同步发布的，但1.x版本支持ie678,2.x不支持；且两个版本不再更新
      3.x不兼容ie678，且3.x版本还在更新；

  • min版与非min版的区别
      非min版主要用于学习与开发，有注释，且可阅读性较强；min版是压缩版，没有注释，容量较小，用于生产环境。

jquery的入口函数

1
2
3
4
5
6
7
8
9
//jquery入口函数的两种写法
//第一种写法
$(document).ready(function(){
...
});
//第二种写法
$(function(){
...
});

注意：

  • jquery的入口函数要比js的入口函数执行的早一些
  • jquery的入口函数会等待页面加载完成才执行，但是不会等待图片的加载
  • js的入口函数会等待页面加载完成，并且等待图片加载完成才开始执行

DOM对象(js对象)与jq对象

  1. 什么是DOM对象（js对象）：使用js的方式获取到的元素就是js对象（dom对象）
    var cloth = document.getElementById("cloth"); cloth.style.backgroundColor = "pink";

  2. 什么是jq对象：使用jq的方式获取到的元素就是jq对象
    var $li=$("li"); $li.text("I Change the context.");

  3. jq对象与js对象的区别：js对象不能调用jq对象的方法

  4. jq对象与js对象的联系
      jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆js对象（宏观上）

  5. DOM对象与jq对象的转换。
      dom2jq:var cloth = document.getElementById("cloth"); $(cloth).text("hehe");
      jq2dom:$("li")[0].innerText = "hehe";或$("li").get(0).innerText = "haha";

注意：$其实就是一个函数，以后用时记得跟小括号，参数不同，功能就不同，有3种用法：（另: $==jQuery）

  1. 参数是一个function，入口函数
  2. 参数是dom对象，把dom对象转换成jquery对象
  3. 参数是一个字符串，根据前缀找对应类别的对象

选择器

 jquery选择器是jquery提供的一组方法，用来获取页面中的元素。其返回的是jqueryduixiang，且兼容了css1到css3的所有选择器（css怎么写，我们就可以怎么写），并且jquery还添加了很多更加复杂的选择器。

  • 基本选择器与层级选择器

    1
    2
    3
    4
    5
    $("#id").css("backgroundColor","red");//id选择器的样式设置
    $("#id,.green").css("backgroundColor","red");//并集，id为id或class为green的标签都会被设置
    $("li.green").css("backgroundColor","red");//交集，li标签下的green标签样式会被设置
    $("li>p").css("backgroundColor","red");//子代选择器，li标签下的子代中的p标签样式会被设置
    $("li p").css("backgroundColor","red");//后代选择器，li标签下的所有p标签样式会被设置

  • mouseenter与mouseover
      mouseenter是jquery提供的鼠标事件，触发率比mouseover精准，建议使用；其中mouseleaving与mouseenter搭配，mouseover与mouseout搭配

  • 过滤选择器：这类选择器都带冒号，（如 li:first 为第一个li标签）

  • 筛选选择器
      与过滤选择器类似，但是用法不同，筛选选择器主要是方法

名称用法描述
children(selector)$(“ul”).children(“li”)相当于$(“ul>li”),子类选 择器
find(selector)同上相当于后代选择器
siblings(selector)同上查找兄弟节点，但不包括自己
parent()同上查找父母节点
eq(index)同上查找下标为index的节点
next()同上查找下一个兄弟节点
prev()同上查找上一个兄弟节点
index()同上返回当前兄弟节点中的下标

操作方法

css操作

1
2
3
4
5
6
7
8
9
//修改单个样式
$("ul").css("backgroundColor","red");
//修改多个样式
$("li").css({
  backgroundColor:"red",
  fontSize:"12px"
});
//取得样式
$("li").css("fontSize");

class操作

1
2
3
4
5
6
7
8
//添加类
$("ul").addClass(name);
//移除类
$("ul").removeClass(name);
//判断类
$("ul").hasClass(name);
//切换
$("ul").toggleClass(name);

操作属性

1
2
3
4
5
6
7
8
9
10
////attr
//设置单个属性
$("ul").attr("xx","yy");
//设置多个属性
$("ul").attr({xx:yy,aa:bb});
//移除属性
$("ul").removeAttr(name);

////prop:对于布尔类型的属性，disabled,selected,checked,只能用prop
$("ul").prop("selected",true);

动画

1
2
3
4
5
6
7
8
9
10
11
////////使用方法均为如：$("ul").xxx([time]);
////三组基本动画
show/hide:显示/隐藏
slideDowm/slideUp/slideToggle:滑动显示/隐藏/切换
fadeIn/fadeOut/fadeToggle:渐变显示/隐藏/切换

////自定义动画
animate(prop[,speed][,swing/linear][,callback]);

////停止动画
stop()：停止动画，在使用某一动画前调用，可防止动画队列过多

操作节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
////创建节点
$("<span></span>"); 
////添加节点
A.append(B);//将B节点移到A节点内最后的位置
B.appendTo(A);//将B节点移到A节点内最后的位置
A.prepend(B);//将B节点移到A节点内第一个位置
B.prependTo(A);//将B节点移到A节点内第一个位置
A.after(B);//将A节点移到B节点后
A.before(B);//将A节点移到B节点前
////清空节点
A.empty();//清空节点内内容
////删除节点
A.remove();//删除当前节点
////克隆节点
A.clone();//复制当前节点

特殊的属性操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/////无参数时获取属性，有参时设置属性
val();  //操作value值
text()/html()  //操作innertext，innerHTML属性
width()/height()  //操作width/height属性
scrollTop()/scrollLeft()    //操作滚动条事件
offset()/position()   //操作对于document/父元素的位置属性

////注册事件 on  off
//当参数为两个时，为当前对象注册事件
A.on("click",function(){});
//当参数为三个时，为当前元素的子元素注册事件
A.on("click","p",function(){});
//在参数为3个，且第二个为数据时，通过事件e传值
A.on("click",data,function(e){xxx(e.data);});
A.off("click");  //阻止所有 事件
A.trigger("click");  //触发A的click事件
e.stopPropagation();  //禁止冒泡
e.preventDefault();  //事件解绑
//在on（）的function事件中使用return false；达到阻止冒泡和默认的效果

////补充
end(); //返回链式编程中的前一对象
each(function(index,element){}); //循环遍历
$.noConflict(); //释放$的占用

jquery插件

  jquery插件是对jquery进行功能上的优化的一项技术。使用方法为在引入jquery文件后，再引入jquery插件。

jquery.color.js

  提供了一些关于颜色的功能，如颜色动态渐变等

jquery.lazyload.js

  可以为网站提供懒加载功能，即显示时才加载。用法如下

1
2
3
4
5
6
7
8
9
10
<img class="lazy" data-original="01.gif" />

//jsp文件最后面
<script src="jquery-1.12.4.js"></script>
<script src="jquery.lazyload.js" ></script>
<script>
  $(function(){
    $(".lazy").lazyload();
  });
</script>

ajax的使用

  ajax:异步请求，浏览器地址栏不变，进行局部刷新

jquery的ajax

  ajax常用的请求有六种，可分为三层

  • 第一层：
      $.ajax(uel[,settings]);//最底层ajax请求，编写最复杂，完成功能最全
  • 第二层：
      $.load(url[,data][,callback]);$.get(url[,data][,fn][,type]);$.post(url[,data][,fn][,type]);//开发中常用的3个
  • 第三层：
      $.getJSON(url[,data][,fn]);$.getScript(url[,callback]);//高级开发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
////getJson()与getScript()方法
	$.getJSON() 可以完成js“跨域”请求
		域名：域名+端口+项目，js默认不能跨域请求。
	$.getScript()  动态加载js文件。之前使用<script src="">加载页面时，一并加载js文件

////load()方法的使用
     //0.2 请求参数，采用json
	var params = {"username":"杰克", "password":"1234"};
    /* 1 load()函数 ，必须使用jquery对象
    * * 格式：load(url, [data], [callback])
    * 	参数1：url ，请求路径
    * 	参数2：data，请求参数
    * 	参数3：callback，回调函数
    * * 如果没有请求参数，发送的GET请求
    * * 如果有请求参数，发送的POST请求。请求没有中文乱码
    * * 回调函数的参数
    * 	参数1：data，响应数据。load()永远获得字符串，如果需要使用，必须手动转换json对象。
    */
	$(this).load(url,params,function(data){
		//转换json对象
		var jsonData = eval("("+data+")");
		alert(jsonData.message);
	});

////get()和post()方法的使用
    /* 2 $.get() 全局函数，发送get请求
    * * 格式：jQuery.get(url, [data], [callback], [type])
    * * 参数4：type ，返回内容格式，xml, html, script, json, text, _default。
    * * GET请求不适合发送中文数据，存放请求的中文乱码。
    * 	必须手动解码   new String(username.getBytes("ISO-8859-1") ,"UTF-8")
    * * 响应数据，如果使用  application/json;charset=UTF-8 ，jQuery自动将数据转换json对象。
    * * 响应数据，如果使用  text/html;charset=UTF-8 ，回调函数获得字符串数据，需要手动转换。
    * 使用“参数4”，设置"json"，jQuery将字符串 转换成 json对象
    */
	$.get(url,params,function(data){
			alert(data);
		},"json");
    /* 3 $.post() 全局函数，与get方法相似发送post请求
    * * 格式：jQuery.post(url, [data], [callback], [type])
    */
	$.post(url,params,function(data){
		alert(data);
	},"json")；
				
////ajax()方法的使用
    /* 4 $.ajax() 底层功能最强大的
    * * 格式：jQuery.ajax([settings])
    * 	参数settings：设置所有的参数
    * 		url:发送请求的地址
    * 		data:发送到服务器的数据,请求参数
    * 		type:请求方式 ("POST" 或 "GET")， 
    * 		success:成功的回调函数，success(data, textStatus, jqXHR)
    * 		error:请求失败时调用此函数
    * 		dataType:预期服务器返回的数据类型
    * 			"xml": 返回 XML 文档，可用 jQuery 处理。
    * 			"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
    * 			"script": 返回纯文本 JavaScript 代码。
    *            不会自动缓存结果。除非设置了"cache"参数。
    *            注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
    * 			"json": 返回 JSON 数据 。
    * 			"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，
    *             如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
    * 			"text": 返回纯文本字符串
    */
	$.ajax({
		"url":url,
		"data":params,
		"type":"POST",
		"success":function(data){
			   alert(data);
		},
		"error":function(){
				alert("服务器繁忙，请稍后重试");
		},
		"dataType":"json"
	});
感谢你的阅读!