JQuery对象--JQuery选择器--JQuery DOM操作--JQuery 事件

一.Jquery对象
“$”符号在Jquery中代表对Jquery对象的引用,”Jquery”是核心对象.
只有Jquery对象才能调用Jquery方法.
引入Jquery文件有一下两种方法:
1.在线引入


2.本地引入


Dom对象与Jquery对象的相互转换

二.jQuery 选择器
（一）基础选择器
1.Id选择器
格式:$(“#id属性值”)
获取指定id值的对象(只会获取到第一个id的值) 注:是否取到值,可看console中length的长度值

// id选择器
var div1 = $("#div1");
		console.log(div1);

2.类选择器
格式:$(“.class属性值”)
获取所有指定表签名的元素

// 类选择器
var cls = $(".test");
		console.log(cls);

3.元素选择器
格式:$(“元素名|标签名”)
获取所有指定标签名的元素

// 元素选择器
var divs = $("div");
		console.log(divs);

4.通用选择器
格式:$(“*”)
获取所有元素的对象

// 通用选择器
var all = $("*");
		console.log(all);

5.组合选择器
格式:$(“选择器1,选择器2,…”)
同时选中这几个选择器匹配的元素

// 组合选择器
	var group = $("#div1,span,.test");
		console.log(group);

（二）层次选择器
1.后代选择器
格式:$("#parent div")
取所有后代

<div id="parent">
var houdai = $("#parent div");
		  houdai.each(function(){
			  console.log(this);
		  });

2.子代选择器
格式:$("#parent>div")
只取一个代子代

var zidai = $("#parent > div");
	zidai.each(function(){
		console.log(this);
	});

3.相邻选择器
格式:$(".blue + img")
只会查询指定元素的下一个指定元素(只往下找一次,不管有没有,只取一次)

var xl = $("#child + p");
	xl.each(function(){
		console.log(this);
	});

4.同辈选择器
格式:$(".blue ~ img")
选择同一个类下,blue之后的img元素

var tb = $(".gray ~ img");
	tb.each(function(){
		console.log(this);
	});

（三）表单选择器
表单元素:文本框,密码框,单选框,复选框,文本域,文件域,隐藏域,下拉框等
格式: $(":input") (input前加”:”才为表单选择器,不加”:”为元素选择器)
例:

var inputs = $(":input"); // 表单选择器，所有表单元素
	console.log(inputs.length);
var inputs2 = $("input"); //元素选择器
	console.log(inputs2.length);

1.过滤选择器
A.:checked 所有被选中的元素
B.:eq(index) 匹配指定下标的元素
C.:gt(index) 匹配下标大于指定值的元素
D.:odd() 选择每个相隔(奇数)的元素
E.:even() 选择每个相隔(偶数)的元素
三.jQuery DOM操作
（一）操作元素的属性
1.获取属性
attr(属性名): 获取指定的属性值,操作checkbox时选中返回checked,没有选中返回undefined
prop(属性名): 获取具有true和false两个属性的属性值
注:checkbox,selected,disabled可用prop()来获取属性

// 获取元素的属性
		var hef = $("a").attr("href");
		console.log(hef);
		var hef2 = $("a").prop("href");
		console.log(hef2);

2.设置属性
attr(属性名,属性值): 设置指定的属性值
prop(属性名,属性值): 设置具有true和false两个属性的属性值

// 设置属性的值
		$("a").attr("href","http://www.shsxt.com");
		$("#ck1").prop("checked",false);

3.移除属性
removeAttr(属性名): 移除指定的属性

//移除属性
		$("a").removeAttr("href");

（二）操作元素的样式
1.attr(“class”): 获取class属性值,即样式名

$("#conRed").attr("class");

2.attr(“class”,”样式名”): 修改class属性值,修改样式
如果属性不存在,则添加属性
如果属性存在,则修改属性

$("#conBlue").attr("class","green");

3.addClass(“样式名”): 添加样式
原来的样式保留,如果出现相同的样式,以后面定义的样式为准

$("#conRed").addClass("larger");

4.css(): 添加具体样式

// 添加一个具体样式  css("样式名","样式值")
$("#remove").css("color","red");
// 同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})
$("#cemove").css({"color":"red","font-family":"楷体","background-color":"gray"})

5.removeClass(class): 移除样式名

/$("#remove").removeClass("blue larger");

（三）操作元素的内容
1.html(): 获取元素的html内容
2.html(“hrml内容”): 设定元素的html内容

$("#html").html("<h3>上海</h3>"); 

3.text(): 获取元素的文本内容,不包含html
4.text(“text内容”): 设置元素的文本内容,不包含html

$("#text").text("上海");

5.val(): 获取元素的alue值
6.val(‘值’): 设定元素的alue值

$("input").val("Hello");

（四）创建元素
$(“元素内容”)

$(‘this is a paragraph!!!’)

（五）添加元素
1.前追加
prepend(content)

// 父元素
	var parent = $("#parent");
// 要追加的内容 
	var span = $('<span class="pink">女神</span>');
	parent.prepend(span);

$(content).prependTo(selector)

$(span).prependTo(parent);

注:追加的内容可以为字符,html,元素等
A.如果元素本身不存在,则会添加该元素
B.如果存在,直接讲该元素移到被追加元素的前面
2.后追加
append(content)

Parent.append(span);

$(content).appendTo(selector)

$(span).appendTo(parent);

3.插入同级元素
$(selector).before(content)

$("#xxr").before("<div class='blue'><span>小奶狗</span></div>");

$(selector).after(content)

$("#xxr").after("<div class='red'><span>老干部</span></div>");

（六）删除元素
1.remove(): 删除所选元素或指定的子元素,包括整个标签和内容一起删

$(".green").remove();

2.empty(): 清空所选元素的内容

$(".blue").empty();

（七）遍历元素
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。

$(".green").each(function(index,element){
		console.log(index);
		console.log(element);
		console.log(element.innerHTML);
		console.log($(element).html());
	});

四.Jquery 事件

1.ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
格式:$(document).ready(function())等价于$(function(){})

$(document).ready(function(){
		var mydiv = $("#mydiv");
		console.log(mydiv);
	});

注:onload与ready()的区别:
A.ready()在DOM结构解析完毕后执行
B.Onload在DOM结构解析完毕，并且外部资源加载完毕后执行
2.绑定元素事件
步骤:
A 确定为哪些元素绑定事件
获取元素
B.绑定什么事件(事件类型)
第一个参数：事件的类型
C.相应事件触发的，执行的操作
第二个参数:函数
(1)绑定简单事件
①　Js绑定事件

document.getElementById("btn").onclick = function(){
	alert('这是个按钮。。。');
};

②　Bind()绑定事件

$("#btn").bind("click",function(){
	alert('这是个按钮。。。');
});

③　直接绑定事件(推荐使用)

$("#btn").click(function(){
	alert('这是个按钮。。。');
});

(2)绑定多个事件

$("h3").bind('click mouseout',function(){
	console.log("绑多个事件");
});

//链式编程

$("h3").bind('click',function(){
	alert("链式编程 1");
}).bind('mouseout',function(){
	$("#slowDiv").show("slow");//让 slowDiv 显示
});

$("#test").click(function(){
	console.log("点击鼠标了....");
}).mouseout(function () {
	console.log("移出鼠标了...");
});

$("#test").bind({
	click:function(){
		alert("链式编程 1");
	},
	mouseout:function(){
		$("#slowDiv").show("slow");
	}
});