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 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 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
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php生成shtml类用法实例
2014/12/09 PHP
php简单实现MVC
2015/02/05 PHP
php限制文件下载速度的代码
2015/10/20 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
JS获取select-option-text_value的方法
2013/12/26 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python opencv实现证件照换底功能
2019/08/19 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
pytorch中index_select()的用法详解
2021/01/06 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
美国性感内衣店:Yandy
2018/06/12 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
母亲节演讲稿
2014/05/27 职场文书
环保守法证明
2015/06/24 职场文书
处罚决定书范文
2015/06/24 职场文书
导游词之吉林花园山
2019/10/17 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL