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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
js中数组的常用方法小结
Dec 30 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP实现的简单日历类
2014/11/29 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
心理健康教育心得体会
2013/12/29 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL