Jquery中函数传递的是值还是地址 jquery的函数有哪些

一、JQuery介绍

什么是JQuery?
JQuery是js和查询（Query），它是辅助JavaScript开发的js类库。

JQuery的核心思想
写的更少，做得更多，实现了很多浏览器的兼容问题。

好处
免费、开源，JQuery的语法设计可以使开发更加边界，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用AJax以及其他功能。

二、JQuery的HellWorld

注意：使用JQuery必须引入JQuery库

JQuery中的$是一个函数。

怎么为按钮添加点击响应函数？

$(function(){
	var $btnObj = $("#btnID");
	$btnObj.click(function){
		alert("JQuery的单击事件");
	});
});

三、核心函数

是JQuery的核心函数，能完成JQuery的很多功能，$()就是调用$这个函数。

1. 传入参数为[函数]时，表示 页面加载完成之后，相当于window.onload = function(){};

$(function(){

});

2. 传入参数为[html字符串]时，会帮我们创建这个html标签对象

${"<div></div>"};

3. 传入参数为[选择器字符串]时，id选择器，根据id查询标签对象

$("#选择器");

4. $(“标签名”);标签名选择器，根据指定的标签名查询标签对象

$("div");

5. $(".class属性值");类型选择器，可以根据class属性查询标签对象

$(".class属性值");

6. 传入参数为[DOM对象]时，会把DOM对象转换为JQuery对象

var btnObj = document.getElementById("btn01");
alert(btnObj);//HTML标签名Element
alert($(btnObj));//DOM对象转为JQuery对象  Object Object

四、JQuery对象和DOM对象区分

1.什么是JQuery对象，什么是DOM对象？

• DOM对象
  通过getElementById()查询出来的标签对象是DOM对象
  通过getElementByName()查询出来的标签对象是Dom对象
  通过getElementByTagName()查询出来的标签对象是Dom对象
  通过createElement()查询出来的标签对象是Dom对象
  Dom对象alert出来的效果:object HTML标签名Element
• JQuery对象
  通过JQuey提供的API创建的对象是JQuery对象
  通过JQuery包装的Dom对象，也是JQuery对象
  通过JQuery提供的API查询到的对象，是JQuery对象
  JQuery对象alert出来的效果:Object Object

2.JQuery对象的本质
JQuery对象是DOM对象的数组+JQuery提供的一系列功能函数。

$(function() {
	var arr = [12, "abc", true];
	var $btns = $("button");
	for (var i = 0; i < $btns.length; i++) {
		alert($btns[i]); //是个Dom对象
	}
});

3.JQuery对象和Dom对象使用区别
JQuery对象不能使用Dom对象的属性和方法
Dom对象不能使用JQuery对象的属性和方法

4.JQuery对象和Dom对象互转

• Dom对象转化为JQuery对象

1.先有dom对象
 2.$(dom对象)就可以转化为JQuery对象

$function({
	var btnObj = document.getElementById("btn01");//Dom对象
	alert($(btnObj));//JQuery对象
});

• JQuery对象转化为Dom对象
  JQuery对象[下标]取出相应的dom对象

$(function() {
	var arr = [12, "abc", true];
	var $btns = $("button");
	for (var i = 0; i < $btns.length; i++) {
		alert($btns[i]); //是个Dom对象
	}
});

五、JQuery选择器

1.基本选择器

• #ID选择器

根据id查找标签名对象   $("#id");

//1.选择id为one的元素"background-color","#bbffaa"
				$("#btn1").click(function(){
					//css()方法可以设置和获取样式
					$("#one").css("background-color","red");
				});

• .class选择器

根据class查找标签对象		$(".选择器");

//2.选择class为mini的所有元素
				$("#btn2").click(function(){
					$(".mini").css("background-color","red");
				});

• element选择器

根据标签名查找标签对象		$("div选择器");

/3.选择元素名是div的所有元素
				$("#btn3").click(function(){
					$("div").css("background-color","red");
					
				});

• 选择器

表示任意的，所有的元素

//4.选择所有的元素
				$("#btn4").click(function(){
					$("*").css("background-color","red");
					
				});

• selector1,selector2组合选择器

合并选择器1,选择器2的结果并返回
 p.myClass 表示标签名必须是p标签，而且class类型得是myClass

//5.选择所有的span元素和id为two的元素
				$("#btn5").click(function(){
					$("span,#two").css("background-color","re`在这里插入代码片`d");
					
				});

2.层级选择器

• ancestor descendant

ance中的所有des元素

//1.选择 body 内的所有 div 元素
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

• parent > child

parent内的子元素，孙元素不算

//2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});

• prev + next

prev的下一个next元素

//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

• prev ~ siblings

prev元素后面所有的兄弟元素

//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});

3.过滤选择器

• :first 获取第一个元素

//1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

• :last 获取最后一个元素

`//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});`

• :not(selector) 去除所有与给定选择器匹配的元素

//3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});

• :even匹配所有索引值为偶数的元素，从0开始计数

//4.选择索引值为偶数的 div 元素
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

• :odd匹配所有索引值为奇数的元素，从0开始计数

//5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

• :eq(index) 匹配一个给定索引值的元素

//6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

• :gt(index) 匹配所有大于给定索引值的元素

//7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

• :lt(index) 匹配所有小于给定索引值的元素

//8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

• :header 匹配如h1,h2之类的标题元素

//9.选择所有的标题元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

• :animated 匹配所有正在执行动画效果的元素

//10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});

• :focus 触发每一个匹配元素的focus事件

//11.选择没有执行动画的最后一个div
				$("#btn11").click(function(){
					$("div:not(:animated):last").css("background", "#bbffaa");
				});