20190422记录

Jquery对象与DOM对象的呼唤

/获取Dom对象/
var divDom = document.getElementById(“mydiv”);
console.log(divDom);

/Jquery包装集对象/
var divJquery = $("#mydiv");
console.log(divJquery);

	console.log("====Dom对象与Jquery对象的互相转换====");
	var domToJquery = $(divDom);
	console.log(domToJquery);
	
	var jqueryToDom = divJquery[0];
	console.log(jqueryToDom);

// each() Jquery方法，遍历方法
divJquery.each(function(index,element){
console.log(index);
console.log("--------");
console.log(element);// dom对象
console.log(this); // dom对象
});

Jquery选择器

基础选择器
1、ID选择器
格式：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id属性值") 获取指定…(".class属性值")
获取所有指定class属性值的元素
3、元素选择器
格式：$("元素名/标签名")获取所有指定标签名的元素4、通用选择器格式：$("*")
获取所有的元素的对象
5、组合选择器
格式：$(“选择器1,选择器2…”)
选择器实例：
// id选择器
var div1 = $("#div1");
console.log(div1);

	// 类选择器
	var cls = $(".test");
	console.log(cls);
	
	// 元素选择器
	var divs = $("div");
	console.log(divs);
	
	// 通用选择器
	var all = $("*");
	console.log(all);
	
	
	// 组合选择器
	var group = $("#div1,span,.test");
	console.log(group);

层次选择器
后代选择器ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素
相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素
表单选择器
表单元素：文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select
非表单元素：div、span、p、h1~h6、img、a、table
过滤选择器
:checked 选择所有被选中的元素
:eq(index) 匹配指定下标的元素
:gt(index) 匹配下标大于指定值的所有元素
:odd 选择每个相隔的（奇数） 元素
:even 选择每个相隔的（偶数） 元素

Jquery DOM操作

Prop:操作值为true&false的对象
Attr：操作其他对象
Prop()参数为一个的时候，获取对象的值；参数为两个的时候，改变对象的值
Attr()参数为一个的时候，获取对象的相应属性；参数为两个的时候，改变对象的相应属性

html() 获取元素的html内容
html(“html,内容”) 设定元素的html内容
text() 获取元素的文本内容，不包含html
text(“text 内容”) 设置元素的文本内容，不包含html
val() 获取元素value值
val(‘值’) 设定元素的value值

Jquery事件

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

onload与ready()的区别：
1、ready()在DOM结构解析完毕后即执行
2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行

绑定事件的过程：
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
/绑定多个事件/
// 聚焦失焦事件
// 方式一：
$("#txt").focus(function(){
// 聚焦时清空文本框
$("#txt").val("");
}).blur(function(){
$("#txt").val(“你好”);
});