jQuery

jQuery

是一个轻量级的JS库是一个封装好的JS文件.提供了更为简便的页面元素操作方式
封装了 DOM  ， JS ， CSS
核心理念: Write Less Do More
版本
	jQuery 3.3.1
	jQuery 2.x 不再支持IE6，7，8
	jQuery 1.11.x 
使用 jQuery
	引用jQuery文件
	<script src = "jquery-1.11.3.js"></script>
	注意:引入的操作必须放在jQuery操作之前
2.  jquery对象
	jQuery对象是jQuery对页面元素封装后的一种体现
	jQuery中提供的所有操作都只针对jQuery对象,其他对象不能用(如 DOM对象)
3.工厂函数- $() 
想要获取jQuery对象或转换jQuery对象就必须使用工厂函数
DOM对象和jQuery对象之间的转换
DOM对象: 以DOM的方式获得出来的节点对象,都是DOM对象，DOM对象只能
用DOM提供的方法和属性,是不能访问jQuery提供的属性和方法
jQuery对象:由jQuery封装得到的对象,jQuery对象只能访问jQuery提供的方法
和属性，是不能使用DOM使用的属性和方法
1.将DOM对象转换为jQuery对象
	语法 var  $obj = $(DOM对象);

• 注意 在给jQuery对象起名的时候,最好在jQuery对象前+ “$”

  将jQuery对象转换为DOM对象
  1.var dom对象 = jQuery对象.get(0);
  2.var dom对象 = jQuery对象[0];

  Js 中创建对象

  使用Object 直接创建对象
  var newobj = new Object();
  //添加属性
  newobj.property1 = value1;
  newobj.property2 = value2;
  //添加方法
  newobj,method1 = function(){}
  newobj,mechod2 = function(arg){}

使用构造器创建对象

• funtion 对象名(参数1,参数2…){}
• //使用参数为属性赋值
• this.属性1 = 参数1;
• this.funName = function(){}
  只能使用this来访问或创建当前对象的成员
  使用对象时
  var obj1 = new 对象名(参数1，参数2)

使用JSON创建对象

什么是json?
JSON:JavaScript Object Notation – js的对象表现形式
JSON通常会作为轻量级的数据交换格式

• JSON一般表示只有属性没有方法的对象
  2声明JSON对象
  1.使用键值对的方式来声明数据的
  2 所有属性，必须用"“引起来,如果是字符串的话,也必须用”"引起来
  3 属性和值之间用 : 来隔开
  4 多个属性之间使用逗号隔开
  5 JSON对象要用大括号来表示

  <script>
	var person = {"name":"张无忌","age":25,"gender":"Male"};
	console.log(person.name);
  </script>

jQuery选择器

1.作用
获取页面上的元素们，返回jQuery对象所组成的数组
语法：$("选择器")2.选择器的分类1.基础选择器1.id选择器用法:$("#ID值")
说明:返回HTML中指定ID值的元素
2.类选择器
用法:$(".classname")说明:返回HTML中class为classname的元素3.元素选择器用法:$(“元素名称”)
说明:返回HTML中所指定标记的元素
4.通用选择器
用法：$("\ast ")说明:返回HTML中所有的元素5.群组选择器用法:$(“selector,selector,…”)
说明:返回工厂函数内所有选择器的元素
2.层级选择器
$(“selector1 selector2”)
后代选择器
$("selector1>selector2")子代选择器3.$(“selector1+selector2”)
名称:相邻兄弟选择器
作用:匹配紧紧跟在selector1后面满足selector2选择器的元素
4.$(“selector1~selector2”)
名称:通用兄弟选择器
作用:匹配selector1后面且满足selector2选择器的所有元素
3.过滤选择器
1.基本过滤选择器
1.:first
只匹配一组元素的第一个
2.:last
只匹配一组元素中的最后一个
3.:not(selector)
在一组元素中将满足selector的元素排除出去
4.:odd
匹配偶数行元素(奇数索引)
:even
匹配奇数行元素(偶数索引)
5.:eq(index)
匹配下标等于index的元素
$(“p:eq(0)”).css
6.:gt(index)
匹配下标大于index的元素
7:lt(index)
匹配下标小于index的元素
2.内容过滤选择器
1.:contains(“text”)
匹配包含制定文本的元素
$("#p:contains(‘佳能’)");
2.:empty
匹配元素(不包含任何子元素以及文本)
3.:has(selector)
匹配含有指定选择器的元素
4.:parent
匹配本身是父元素的元素
3.可见性过滤选择器
1.:visible
匹配所有可见元素
2.:hidden
匹配所有不可见元素
4.状态过滤选择器
主要用在表单控件上
:enable
匹配所有可用的元素
:disable
匹配所有禁用元素
:checked
匹配所有被选中的元素(raido 和 checkbox)
:selected
匹配所有被选中的元素(select)
5.子元素过滤器
:first-child
匹配其父元素的第一个子元素
:last-child
匹配其父元素的最后一个元素
:nth-child(n)
匹配其父元素中的第n个子元素
6.属性选择器
使用元素的属性来匹配页面的元素
1.[attr]
匹配具有attr的元素
ex:
1.匹配页面中所有有id属性的元素
$("[id]")
2.匹配页面中所有有"class"属性的元素
$("[class]")
2.[attr = value]
匹配attr属性值为value的元素
匹配页面中所有的文本框
$(“text”)
$("input[type{=}^{\prime }tex{t}^{\prime }]")3.[attr!=value]4.[att{r}^{=}value]匹配attr属性值是以value字符开始的元素5.[attr$ = value]
匹配attr属性值是以value字符结尾的元素
6.[attr*=value]
匹配attr属性值中包含value的元素
jQuery 操作 DOM
1.基本操作
1.html()等同于dom中的 innerHTML
作用:读取或设置jQuery对象中的HTML内容
2.text()
等同于dom中的innerText
作用:读取或设置jQuery对象中的普通文本内容
3.val()
等同于dom中的value
作用:读取或设置jQuery对象的value值(表单)
2.属性操作
1.attr()
作用:读取或设置jQuery对象的属性值
ex
$("#main").attr(“id”);
$("#main").attr(“class”,“redBack”)
2.removeAttr(attrName)
作用:删除jQuery对象指定的属性
3.JSON
JavaScript Object Notation
JSON是一种轻量级的数据交换格式

			声明JSON对象格式
			1.JSON格式的对象的使用{}
			2.使用键值对的方式来声明数据
			 键 - 表示对象的属性
			 值 - 表示对象的值
			3.属性的属性(键),必须用""引起来,如果值也是字符串的话也要
			用""引起来
			4.属性和值之间用:隔开
			5.多段属性之间,使用逗号隔开
			var obj = {
				"name" :"sanfeng,zhang"
				"age":30
				"gender":"男"
			}
		4.样式操作
		attr("class","className")
		为元素动态绑定class属性值
		2.attr.addclass("className")
		3.removeClass("className")
		删除指定的类选择器
		4、removeClass()
		删除所有的类选择器
		5.toggleClass("className")
		切换样式
			元素如果具备className选择器 则删除
			元素如果没有className选择器 则添加
		6.hasclass("className")
			判断元素是否包含className选择器
		7.css("属性","值")
		为css动态的设置某css属性及其值
		$obj.css("background-coloc","red")
		8.css(JSON对象)
			$obj.css({
			"color":"red",
			"font-size":"32px"
			});
	遍历节点
		1.children() /children(selector)
		获取jQuery对象的所有子元素或带有指定选择器的子元素
		注意:只考虑子元素不考虑后代元素
		2.next() / next(selector)
		获取jQuery对象的下一个元素 / 满足selector的下一个兄弟元素
		3.prev()/ prev(selector)
		过去jQuery对象的上一个元素,或是 满足selectoe的上一个兄弟元素
		4.siblings()/siblings(selector)
		获取jQuery的所有兄弟/满足selector的所有兄弟元素
		5.find(selector)
		查找满足selector选择器的后代元素
		6.parent()
		查找jQuery对象的父元素
	4.创建 & 插入节点
	1.创建对象
		语法 $("创建内容")
		ex:
			1.创建一个div
				var $div = $("<div></div>");
			2.创建一个button,文本为测试按钮
				var $btn = $("<button>测试按钮</button>");
	2.插入节点
		内部插入
			1.$obj.append($new)
			将$new作为$obj的最后一个子元素插入进来
			2.$obj.prepend($new)
			将$new作为$obj的第一个子元素插入进来
		外部插入
			1.$obj.after($new)
			将$new作为$obj的下一个兄弟元素来插入
			2.before()
			将$new作为$obj的上一个兄弟元素来插入