#前端
##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);
页面载入成功后会调用传入的函数对象
注意:
此方式可以给页面载入动态的增加多个函数对象,不会被覆盖。