jQuery

一、简介

1、什么是jQuery

JavaScript的框架,是一套工具库。简化了JavaScript的功能实现。可以使得开发者写更少的代码,却做更多的事-write less do more。

JQuery是一个工具库,是对JS的代码进行了一次封装

JS代码和JQuery代码对比:

JS:
	通过js来获取页面上的一个div:
		document.getElementById("d1")
JQuery:
	通过JQ来获取页面上的一个div:
		$("#d1")
2、jQuery功能

jQuery库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
3、安装

有两个版本的 jQuery 可供下载:

  • Production version - 用于实际的网站中,已被精简和压缩。 jquery-1.8.3.js
  • Development version - 用于测试和开发(未压缩,是可读的代码) jquery-1.8.3.min.js
<head> 
	<script src="jquery-1.10.2.min.js"></script>    <!--引用jquery库-->
</head>
4、初识jQuery
<head>
	<title>初识jQuery</title>
	<meta charset="utf-8">
	<script src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
        function myclick()
        {
            $("#pid").hide()   //获取id为pid的标签,并将其隐藏
        }
	</script>
</head>

<body>
	<p id="pid">做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
	<input type="button" name="" value="点击" onclick="myclick()">
</body>

二、jQuery选择器

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。

jQuery 中所有选择器都以美元符号开头:$()。

1、基本选择器
1.1 元素选择器
$("p").hide();       // 所有的p标签都被隐藏
1.2 #id选择器
$("#test");         //id值为test的标签
1.3 .class选择器
$(".test");         //类名为test的标签
1.4 *全选择器
$("*");             //所有的标签,全文档
1.5 多选择器共用
var p = $("p.pc")        //p标签且类名为pc的标签

var p = $("p#pid")        //p标签且id为pid的标签

var p = $("div p")         //div标签下的p标签

var p = $("div,p")         //多个标签同时获取,用逗号分隔
1.6 jQuery对象与DOM对象区别

DOM获取元素:

document.getElement...(xxx)  //返回DOM对象

jQuery获取元素:

$("xxx")                     //返回jQuery对象

都是对一个或多个标签的封装,都指向一个或多个标签,只是支持的功能不一样,DOM对象和Jquery对象都有各自的方法

  • jQuery对象与DOM对象相互转换
  • DOM --> jQuery
var div = document.getElementById("div_1");   //DOM对象

var div_jq = $(div)        //jquery对象
  • jQuery --> DOM
var div = $(div)        //jquery对象

var div = div.get(0)      //DOM对象

var div  = div[0]          //DOM对象
2、层级选择器
2.1 后代选择器

$(“selector1 selector2”) 中间有空格

$("div .a");            //选择所有的div,其中样式类为a的后代
$("div .a input");      //选择所有的div,其中样式类为a的后代,再选择这些后代的input后代标签
2.2 父子选择器

$(“selector1 > selector2”); 中间为大于号

$("span > input");   //所有的span的input子标签

$("div span>input"); //所有的div下的span的input子标签
2.3 后续紧邻兄弟

$(“selector1+selector2”) 中间为加号

$("div+p") ;  //紧邻div的p标签

$("div+p+input")  //紧邻div的p标签紧邻的input标签
2.4 后续所有兄弟

$(“selector1~selector2”) 中间为破折号

$("div~p") ;  //紧邻div后的所有p标签
3、基本过滤选择器
  • :first 选出匹配到的标签中的第一个标签
var p = $("div>b>p:first")
p.hide()                       //将div下的b标签下的第一个p标签隐藏


<div>
	<b >
		<p id="pid" class="a">1.做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
		<p id="pid2">2.做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
	</b>
</div>
  • :last 选出匹配到的标签中的最后一个标签
$("div>p:last")   //div标签下的所有p标签中的第一个
  • :eq(index) 选出对应index索引值的标签 index从0开始
$("div>p:eq(1)")    //div下的所有p标签中 索引值为1的标签
  • :gt(index) 选出索引大于index的元素
$("div>input:gt(1)");  //div下所有input子标签中索引大于1的
  • :lt(index) 选出索引小于index的元素
$("div>input:lt(1)");//div下所有input子标签中索引小于1的
  • :odd 选出索引值为奇数的元素
$("div>input:odd");//div下所有input子标签中索引为1,3,5..的

:even 选出索引值为偶数的元素

$("div>input:odd");//div下所有input子标签中索引为2,4,6..的
  • :not(selector) 选出selector不能匹配到的元素
$("div>input:not(.a)");  //div下所有input子标签中样式类名不是a的 
$("#abc>li:not(#a)");    //id为abc的标签下的li子标签中id不是a的
$("#abc>li:not(:eq(2))");//id为abc的标签下的li子标签中索引不是2的
4、内容过滤选择器 (了解)
  • :contains 模糊匹配 (自己含有,或后代含有)
$("div:contains('2')")   div或div下内容包括2的标签
  • :empty 没有内容的标签
$("p:empty")  //没有内容的p标签
  • :parent 包含子元素或文本内容
$("p:parent")   //有文本内容或子标签的p标签
  • :has(selector) 拥有某种后代的标签
$("div:has('p')")   //有p标签的div标签
5、属性过滤选择器
  • $("[name]") 有name属性的
  • $("[name='zhj']") name属性值为zhj的
  • $("[value='male']") value属性值为male的
  • $("[type='text']") type属性值为text的
$("div[name='abc']");               //div标签且name为abc
6、可见性过滤选择器
  • :visible 可见元素
  • :hidden 隐藏元素
<script type="text/javascript">
    function myclick()
    {
	    $("div p:empty").hide();
	    console.log($("div p:visible")); 
    }
</script>

<div>
	<p id="pid" class="a">1.做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
	<p id="pid2">2.做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
	<p></p>
</div>

<input type="button" name="" value="点击" onclick="myclick()">
7、表单选择器
  • :input 所有的input元素
  • :checked 适用于单选按钮 和 复选框
  • :selected 适用于下拉框

jQuery对象遍历

var plist = $(":input");
for(var i = 0; i<plist.size();i++)
{
    var pd = plist.get(i);      //DOM对象
    var pq = plist.eq(i);       //jquery对象
    console.log($(pd).val());
    console.log(pq.val());
}

或者

var ps = $("div p");
ps.each(function(i){    //i为循环变量 0,1,2...
 	console.log(this)   //this为当前遍历到的每一个DOM对象
});

三、jQuery事件

1、事件注册的方式
  • 基于标签:和之前JS中使用方式一致,Jquery未加干涉
  • 基于编程:Jquery提供了全新的API
$(document).ready(function(){
	$("#btn_1").click(function(event){        
		console.log($(this).val());           //this为当前触发事件的标签的DOM对象
		console.log(this.value);
	})
})

Ready事件

等价于onload的作用,用于保证代码的执行在页面加载之后

$(document).ready(function(){...});
$(function(){...})   //简写
2、jQuery事件函数

鼠标事件

键盘事件

表单事件

click()

keypress()

submit()

dblclick()

keydown()

change()

mouseover()

keyup()

focus()

mousemove()

blur()

mouseout()

toggle()

hover()

//toggle开关 示例
$(function(){
	$("#btn_1").toggle(function(){
		console.log('abc')
		$("#pid").hide()
	},
	function(){
		$("#pid").show()
	})
})
//hover鼠标复合函数
$(function(){
	 $("#div_1").hover(function(){             //mouseover时触发
	 	this.style.backgroundColor = 'blue';
	 },
	 function(){                               //mouseout时触发
	 	$(this).css({"background-color":"green"});
	 })
})

四、jQuery DOM

jQuery 中非常重要的部分,就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

1、获取内容
  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
<script >
	$(function(){
		$("#btn").click(function(){
			var pe = $("div");
			var text = pe.text();         //获得标签文本内容
			console.log(text);    

			var html = pe.html();          //获取标签内容(包括HTML标记)
			console.log(html);

			console.log($(this).val());     //表单value
            
            $(this).val("不要点我");    //修改value值  -- 通过参数  上同
	})
})

</script>

<div>abc
	<p id="pid" class="a">
		1.做一个决定,并不难,难的是付诸行动,并且坚持到底。
	</p>
</div>

<input type="button" value="点我" id="btn">
2、获取属性

jQuery attr() 方法用于获取属性值。

  • attr("属性名") 获取属性名
  • attr("属性名","属性值") 设置属性值
  • attr({属性名1:属性值, 属性名2:属性值,...}) 一次设置多个属性值
  • removeAttr("属性名") 删除标签的属性
  • prop 和attr使用一致,作用一致;但prop在获取bool类型属性时(checkd,selected)更友好
$(function(){
	 $(":input").click(function(){
	 	var attr =  $("a").attr("href");   //获取href属性值
	 	console.log(attr);

 	 $("a").attr("href","http://www.baidu.com"); //修改href属性值
 })

})

<a href="http://www.baizhiedu.com" style="text-decoration: none" target="_blank">百知教育</a>
<input type="button" value="点我">
3、添加元素
  • append() - 在被选元素最后一个位置插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
<script >
$(function(){
	 $("#btn").click(function(){
	 	 $("#div_1").append("<p>通过 jQuery,可以很容易地添加新元素/内容。</p>")
	 })
})
</script>

<div id="div_1">
	abc
</div>
<input type="button" value="添加" id="btn">
4、删除元素
  • remove() - 删除被选元素(及其子元素)
  • empty() - 清空元素内容
5、jQuery CSS类
  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类

通过添加class实现 当点击button时将div的文本颜色改为blue,字体改为120px。

<!--样式表-->
<style type="text/css">
	.blue{
		color: blue;
		font-size: 120px;
	}
</style>

<!--jquery代码-->
<script>
$(function(){
	 $("#btn").click(function(){
	 	 $("#div_1").addClass("blue")
	 })
})
</script>

<!--HTML-->
<div id="div_1">
	这是一个文本
</div>
<input type="button" value="添加" id="btn">
6、css( )方法

css() 方法设置或返回被选元素的一个或多个样式属性。

  • css("样式属性名") 获取样式属性值
  • css("样式属性名","样式属性值") 设置样式属性值
  • css({"样式属性名1":"样式属性值","样式属性名2":"样式属性值",..}) 设置多个样式属性值
$("#div_1").css("color","blue");          //设置css样式属性值
console.log($("#div_1").css("color"));    //获取css样式属性值
$("#div_1").css({"background-color":"blue","color":"white","font-size":"50px"}); //一次设置多个属性

补充:

使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

$(document).ready(function(){
  $("p").on("click",function(){
    ...
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});