前端：JQuery基本介绍

#前端
##JQuery

1、js的全局代码区只有一个，这样会造成同名变量的值会被覆盖。
2、使用对象封装，将代码封装到对象中，但是对象如果被覆盖，则全部失效，风险极高。
3、使用工厂模式，将代码进行封装，但是并没有解决问题
4、将封装的函数名字去除，避免覆盖。但是函数没有办法调用了。
5、匿名自调用，可以在页面加载的时候调用一次。但是不能重复调用，并且数据没有办法获取

闭包原理：在全局中不能获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。

6、使用闭包，将数据一次性挂在到windows对象下

JQuery的选择器

1、基本选择器

id选择器
标签选择器
类选择器
组合选择器

2、层次选择器
3、简单选择器
4、内容选择器
5、可见性选择器
6、属性选择器
7、子元素选择器
注意：
jQuery中选择器获取的是存储了HTML元素对象的数组。
jQuery获取元素对象不能直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容

jQuery操作元素属性

获取：

对象名.attr("属性名")//返回当前属性值
注意：此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。

修改：

对象名.attr("属性名","属性值")；

JQuery操作元素内容

获取元素对象
1、获取

对象名.html()//返回当前对象的所有内容，包括HTML标签。
对象名.text()//返回当前对象的文本内容，不包括HTML标签

2、修改

对象名.html("新的内容")//新的内容会将原有内容覆盖，HTML标签会被解析执行
对象名.text("新的内容")//新的内容会将原有内容覆盖，HTML标签不会被解析

JQuery操作元素的样式

1、使用css()

对象名.css("属性名")//返回当前属性的样式值
对象名.css("属性名"，"属性值")//增加、修改元素样式
对象名.css({"样式名":"样式值","样式名":"样式值"......})//使用json传参，提升书写代码效率

2、使用addClass()

对象名.addClass("类选择器名")//增加一个类样式
对象名.removeClass("类选择器名")//删除一个类样式

JQuery操作文档结构

获取元素对象

1、内部插入
append("内容")										将指定的内容追加到对象的内部
appendTo(元素对象或者选择器)							将指定的元素追加到指定的对象内容
prepend()											将指定的元素追加到对象的内部的前面
prependTo()											将指定的元素追加到指定的对象内容前面
2、外部插入
after												将指定的内容追加到指定的元素后面
before												将指定的内容追加到指定的元素后面
inserAfter											把所有匹配的元素插入到另一个，指定的元素元素集合的后面
inserBefore											把所有匹配的元素插入到另一个，指定的元素元素集合的后面

JQuery的动态操作事件

元素对象.bind("事件名",fn)//动态的给指定的元素追加指定的事件及监听的函数
注意：
	js中的是一次添加，多次添加时覆盖的效果
	jQuery是追加效果，可以实现给一个事件添加不同的监听效果。
元素对象.unBind("事件名")//移除指定的元素对象的指定事件
注意：js方式添加的事件不能移除。
元素对象.one("事件名",fn)//给指定的元素对象添加一次性事件，事件触发执行一次即失效。
注意：可以给事件添加多个一次函数，unBind可以用来解绑

JQuery的页面载入事件

$(document).ready(fn);
页面载入成功后会调用传入的函数对象
注意：
此方式可以给页面载入动态的增加多个函数对象，不会被覆盖。