[JavaScript知识库]笔记05-Jquery

• jQuery
  1.概念：write less，do more(写得少，做的多)，jQuery是javascript的框架，目的是为了简化js代码，jQuery能做的事，js都可以做，js能做的，jQuery不一定做，js就是原生代码，jQuery是js封装的工具
  2.使用方法
  1）在html页面中需要引入jQuery.js文件
  2）编写页面加载函数$(function(){代码})
  注意事项：普通的js的function函数，不可以卸载jquery页面加载函数的内部，他们属于同级关系
  jquery的选择器：

/*
1.基础选择器
|--id选择器：$("#id")
|--元素选择器：$("input")
例如：$("div"); 如果有多个div， 返回的是容器那我们在遍历这个容器时，取大的每个元素都是js对象
	js对象和jQuery对象的切换：  $(js对象);  将js对象转换为 jquery ，就可以调用方法
|--Class选择器：$(".class")
	$(".class"); 返回的是容器
|--全选标签选择器：$('*')
	$("*");选择所有
	例如: $("*").css({"background-color":"red","width":"100px"});给所有标签添加背景颜色，
|--多个标签选择器
	$("input,div,#id,button)
2.层级选择器
|--祖先选择器
	$("body div");意思是body标签下的所有div标签包括子标签，孙子标签，重孙子标签
|--父子选择器
	$("body > div");意思是body下的所有div子标签，孙子不行
|--相邻选择器
 	$(" label + div");input相邻的同级标签
|--同级选择器
	$("label ~ div ");
3.基本选择器
	:first $("div:first");代表div的第一行
	:last $("div:last");代表最后一行
	:even $("div:even");代表偶数行
	:odd $("div:odd");代表奇数行
	:not() $("div : not('#p')");除了id为p的选择器
	:gt(index) 下标大于index的
	:lt(index)	下标小于index的
	:eq(index) 下标等于index的
4.内容选择器：文本内容
	:contains(text);
		例如：$("div : cotains('Kitty')");选中div中的内容包含Kitty的
	:empty();没有入参，选中指定标签中没有的内容
	:has(selector);选择指定标签中包含的选择器
	:parent;选择包含子标签的元素
5.可见性选择器：
	:hidden 
	 案例: $("input:hidden").val();选中所有隐藏元素
	:visible 
		案例: $("input:visible").val();
6.属性选择器:
$("input[name='hobby']"); 选中input标签中name属性为hobby,$("input[id]"); 选择所有input标签中 有id 的
7.表单属性选择器:
  	:checked  	
	例如: $("input[name='hobby']:checked"); 选择所有复选框或单选按钮 被选中的
	:selected ;用于下拉列表，被选择的
8.文档内部处理
|--追加
	A.append(B);向A内部追加B
	A.appendTo(B);把A追加到B的内部
	A.prepend(B);向A的内部的前面追加B
	A.prependTo(B);把A追加到B的内部的前面

9.文档外部处理
	A.afert(B);向A外面的后面追加B
	A.before(B);向A外面的前面追加B
	A.insertAfter(B)将A插入到B的后面
	A.insertBefore(B)将A插入到B的前面
10.事件
	blur();失去焦点
	change();当元素发生改变时
	click();点击事件
	focus();聚焦
	submit();提交form表单的
11.拓展方法:
|--
	val();获取指定标签的value的属性的值	
	val("hh");给获取的指定标签的value值赋值
|--
	html();等价于innerHTML获取指定标签的文本值
	html("内容");赋值
|--
	text();等价于innerText不识别标签，取值
	text("内容");赋值
|--
	each(function(index,data){
		index是下标记
		data是js对象
	})
	
	第二种写法
	var d = $("标签");
	$.each(d,function(index,data){
		
	})
|--
	css("属性","值");相当于js的style属性
	多个样式的话css({"属性":"值"},{"属性":"值"})
|-- 
	1.eq(index)获取一个容器中指定下标的元素
	2.first();获取第一个元素
	3.last();获取最后一个元素
	4.is();判断容器中是否包含这个元素，返回true，false
|--根据级别来获取标签
	parent();指定标签的父元素
	parents();指定标签的所有祖先元素
	children();指定标签的所有子元素，不含孙子
	siblings();获取指定标签的同级元素
	pre();获取指定标签的前一个元素
	next();获取指定标签的下一个元素	
|--删除指定属性
	removeProp(属性名)删除指定属性
|--替换
	replaceWith()一个
	replaceAll()所有
|--删除
	empty();删除指定标签的内容
	remove();删除包括自己在内额

|--向后台提交数据的方式有几种?
   1.直接在form表单中添加  submit按钮
   2.使用button按钮绑定 submit()事件;
   3.使用序列化获取form表单的所有值,
	 借助于 window.location.href = "地址?key=value"
















*/