jQuery基础知识点总结(必看)


Posted in Javascript onMay 31, 2016

jQuery是一个优秀的、轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),而jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

1、jQuery入口函数与Js入口函数的区别

【注】js入口函数指的是:window.onload = function(){};

区别一:书写个数不同

Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。

jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。

区别二:执行时机不同

Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。

文档加载的顺序:从上往下,边解析边执行。

2、jQuery对象和DOM对象的相互转换

①DOM对象此处指的是:使用js操作DOM返回的结果

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

②jQuery对象此处指的是:使用jQuery提供的操作DOM的方法返回的结果

var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

③DOM对象转换成jQuery对象

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document).ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象,转换成了jQuery对象,然后才能调用jQuery提供的方法:ready

④jQuery对象转换成DOM对象

// 第一种方式
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 (推荐使用此方式)
// 第二种方式
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

3、jQuery选择器

符号(名称) 说明 用法
基本选择器(重点)
# ID选择器 $(“#btnShow”).css(“color”, “red”); 选择id为btnShow的一个元素(返回值为jQuery对象,下同)
. 类选择器 $(“.liItem”).css(“color”, “red”); 选择含有类liItem的所有元素
element 标签选择器 $(“li”).css(“color”, “red”); 选择标签名为li的所有元素
层级选择器
空格 后代选择器 $(“#j_wrap li”).css(“color”, “red”); 选择id为j_wrap的元素的所有后代元素li
> 子代选择器 $(“#j_wrap > ul > li”).css(“color”, “red”); 选择id为j_wrap的元素的所有子元素ul的所有子元素li
基本过滤选择器
:eq(index) 选择匹配到的元素中索引号为index的一个元素,index从0开始 $(“li:eq(2)”).css(“color”, ”red”); 选择li元素中索引号为2的一个元素
:odd 选择匹配到的元素中索引号为奇数的所有元素,index从0开始 $(“li:odd”).css(“color”, “red”); 选择li元素中索引号为奇数的所有元素
:even 选择匹配到的元素中索引号为偶数的所有元素,index从0开始 $(“li:odd”).css(“color”, “red”); 选择li元素中索引号为偶数的所有元素
筛选选择器(方法)     (重点)
find(selector) 查找指定元素的所有后代元素(子子孙孙) $(“#j_wrap”).find(“li”).css(“color”, “red”); 选择id为j_wrap的所有后代元素li
children() 查找指定元素的直接子元素(亲儿子元素) $(“#j_wrap”).children(“ul”).css(“color”,“red”); 选择id为j_wrap的所有子代元素ul
siblings() 查找所有兄弟元素(不包括自己) $(“#j_liItem”).siblings().css(“color”, “red”); 选择id为j_liItem的所有兄弟元素
parent() 查找父元素(亲的) $(“#j_liItem”).parent(“ul”).css(“color”,“red”); 选择id为j_liItem的父元素
eq(index) 查找指定元素的第index个元素,index是索引号,从0开始 $(“li”).eq(2).css(“color”, “red”); 选择所有li元素中的第二个

以上这篇jQuery基础知识点总结(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS画线(实例代码)
Nov 20 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
Javascript中的解构赋值语法详解
Apr 02 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 #Javascript
javascript小数精度丢失的完美解决方法
May 31 #Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 #Javascript
javascript基本语法
May 31 #Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 #Javascript
通用无限极下拉菜单的实现代码
May 31 #Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 #Javascript
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
javascript call方法使用说明
2010/01/11 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python求解水仙花数的方法
2015/05/11 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
python处理xml文件的方法小结
2017/05/02 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python pycharm的安装及其使用
2019/10/11 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python3中确保枚举值代码分析
2020/12/02 Python
详解python的变量缓存机制
2021/01/24 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
高三英语教学反思
2014/01/13 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python