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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
JavaScript 无符号右移赋值操作
Apr 17 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
async和DOM Script文件加载比较
2014/07/20 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python自动登录126邮箱的方法
2015/07/10 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
浅谈Python __init__.py的作用
2020/10/28 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
一份Java笔试题
2012/02/21 面试题
网吧最新创业计划书范文
2014/03/27 职场文书
捐书活动总结
2014/05/04 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
Python语言中的数据类型-序列
2022/02/24 Python