jquery学习之重要知识点

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示例代码

[jquery插件是可以脱离jquery独立使用的]

时间: 2024-10-29 19:12:20

jquery学习之重要知识点的相关文章

jQuery学习总结(一)

jQuery学习完了,但是感觉知识点很杂,想JavaScript一样,所以还是总结一下比较好. 1.DOCTYPE 在每次的html页面前都会有这样一句话,那么它有什么作用呢? DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档.也就是告知浏览器的渲染显示方式. 2.新的方法--专属jQuery (1)$()方法: 可以通过$()方法来获得页面的指定节点,参数是某种CSS的选择器. var userN

jQuery学习之开篇

吐槽 最近比较烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,如果没有掌握JS.JQuery想要进行后续的开发会非常困难.得,又得学下JQuery,一种蛋蛋的忧伤.一直认为前端的水非常的深这段时间算是见识到了,哎,不过工作还的继续,吐槽完了,卯足干劲充电吧! 前言 某前端白痴一个,会点html+css+js.JQuery的学习书籍看的是<锋利的JQuery>,先入门看了两章,感觉

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jquery学习(一)

简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 首先一定要注意的是引入的路径 按照案例写一个简单的DEMO <%@ page language="java" contentType="text/html; charset=UT

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

jQuery学习-------jQuery选择器

基本选择器: id选择器:$("#id") 标签选择器:$("tag") 类选择器:$(".classname") 通配选择器:$("*") 组选择器:$("selector1,selector2,...,selectorN") 层次选择器: 包含选择器:$("ancestor descendant") 子选择器:$("parent>child") 相邻选择器:

jQuery学习示例------点击红色方块实现左右晃动

<!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javas

jQuery学习--------jQuery过滤器

each() 方法规定为每个匹配元素规定运行的函数. 过滤: 下标过滤: eq(index) //获取第index个元素 类过滤: hasClass(class)  //检查当前元素是否含有某个特定的类,如果有,返回true 例如:$("div").hasClass("div1") //含有div1类的div元素 表达式过滤: filter(expr)  //筛选出与指定表达式expr匹配的元素集合,用逗号分隔多个表达式 filter(fn)    //筛选出与指定