本文共 2954 字,大约阅读时间需要 9 分钟。
1、javascript类库,即js库,预封装了很多函数和对象,为了简化我们的js开发,最大的特点是兼容各大浏览器,即不需要考虑兼容性问题,链式操作——方法链方式大大简化了代码的书写。
2、jquery-1.11.3.js——正常文件:有注释、空行和缩进
jquery-1.11.3.min.js——压缩文件:采用GZIP压缩技术,没有注释、空行和缩进
注:开发时为了加快加载速度,采用压缩版本,平时学习练习研发使用正常版本
3、jquery对象与DOM对象区分
jquery对象:封装DOM对象后产生的对象
DOM对象:通过DOM获取的元素,称之为DOM对象
4、jquery九大选择器
基本选择器、层级选择器、过滤选择器(基本过滤选择器、子元素过滤选择器、可见性过滤选择器、内容过滤选择器、属性过滤选择器、表单对象属性过滤选择器、)
5、可见性过滤选择器
:visible 获取可见元素(不常用)
:hidden 获取不可见元素(常用)
注:对visibility:hidden不起作用
6、【重点记忆】
:not(expr) - 获取不包含指定表达式的元素
【获取class不为XX的xxx元素,其中包含没有class属性的元素,not中的表达式可加单引号可不加,一般不用加】
:has(selector) - 获取含有匹配选择器的元素的父元素
[attrName!=value] - 获取包含指定attrName的值不为value的元素(包含没有该属性的元素,与not包含一致,not也是包含没有该属性的元素)
[attrName][attrName] - 组合属性过滤选择器(交集)(与基本选择器的并集不一样)
selector1,selector2,......($(“one,two”);【组合选择器】
中间用逗号隔开,全部写在一个双引号里,并集)
【隐藏元素的情况】
1.设置为display:none;
2.带有type=“hidden”的表单元素
3.width和height设置为0
4.隐藏的父元素
7、addClass() - 追加样式
无论之前是否包含样式,在此基础上追加一个新的样式,如果之前包含样式,依旧存在
attr()设置样式 - 无论之前是否包含样式,设置成当前样式,如果之前包含样式,会被覆盖
8、css()方法
获取 -css(attrName)
设置:【设置单个】
css(attrName, attrValue)
注意:attrName必须是字符串类型
【设置多个】
css({
attrName : attrValue,
attrName : attrValue,
... ...
})
注意 - attrName直接定义,不需要编写成字符串类型,值不加单位
9、children()与find()的区别:find是找所有后代元素,children是只找子元素
10、替换元素
被替换元素 . replaceWith($(“替换元素”))
replaceAll() - 实际上就是颠倒了的replaceWith()
删除元素
remove() - 删除自身及后代节点[自杀式,与原生DOM的原理完全不同]
empty() - 删除后代节点,保留自身节点(特别适合:清空)
插入元素
内部插入 - 子元素(指定元素内)
append() - 作为最后一个子元素插入到指定元素中
【插入在指定元素的后面】
【显示出来是在后面,作为子元素出现,保留各自前面的li点】
prepend() - 作为第一个子元素插入到指定元素中
【插入在指定元素的前面】
【显示出来是在前面,作为子元素出现,不保留原来li前面的点】
appendTo()
prependTo()【只是上述操作的反操作,前后元素颠倒】
外部插入 - 兄弟元素(指定元素外)
before() - 作为指定元素的上一个兄弟元素插入
after() - 作为指定元素的下一个兄弟元素插入
【只是上述操作的反操作】
insertBefore()
insertAfter()
11、【注意问题】
1. 在js操作css的时候用驼峰。
2. 只要是加小括号的,一定是函数或方法的调用
3. 从加载上来说:写代码时不要随意位置写Js代码,css和html是一个引擎加载,js是另一个引擎加载,如果随意写js,则引擎切换的次数越多。每一种写的顺序的方式都有自己的好处
4.this是指代DOM,不是jquery对象
5.js的函数不具备重载,叫覆盖
6.当脚本代码放在页面上边的时候,用一个全局加载ready
12、jquery UI提供的功能
1.效果(Effects)
animate() - 自定义动画【jQueryui的animate是jQuery animate的补充】
JQUERY中的animate()无法使用的CSS属性,在这都能用
【 animate()方法
当前HTML页面既引入JQUERY也引入JQUERY UI
两者都提供了animate()方法
如何保证调用的animate()一定是JQUERY UI提供的?
原因 - JQUERY是先引入的,animate()方法被覆盖
JavaScript的函数不具备“重载”而是“覆盖”,后面的代替了前面的】
2.交互(Interactions)
3.组件(Widgets)
dialog,对话框是开发中比较重要的元素
13、自调函数 - 尽量避免全局变量和函数(对象)
原则 - 将全局改为局部
自调函数
(function(){
// 定义代码
}());//解决全局问题
自调函数的写法至少13种以上【可自己查】
所有全局变量都在浏览器内存里,会影响性能。
方法1:最前最后加括号
(function(){alert(1);}());
方法2:function外面加括号
(function(){alert(1);})();
方法3:function前面加运算符,void
void function(){alert(2);}(); //据说效率最高~
4:带参数
(function(o) {
alert(o);
})('water');
5 :匿名函数的链式调用
(function(o) {
alert(o);
return arguments.callee;
})('water')('down');
6:~(function(){
alert('water');
})();
7:+function(){
alert('water');
}();
8:-function(){
alert('water');
}();
9:~function(){
alert('water');
}();
10:!function(){alert(1);}();
14、【JQUERY的插件必须掌握!!!】
如何学习JQUERY插件?
插件官方提供的帮助文档
插件提供的Demo示例代码
本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1862030,如需转载请自行联系原作者