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

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基础知识点总结(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery常用知识点总结以及平时封装常用函数

    本文为大家介绍了jQuery中常用知识点及函数,包含许多细节方面的知识,下面我们一起学习一下. jQuery中为我们提供了很多有用的属性,自己总结的一些常用的函数.个人认为在在线排盘开发中会比较常用的,仅供大家学习和参考. 刚开始学习前端的时候开始整理这个文档,现在内容已经逐渐增多.虽然现在看起来,文档里的内容非常简单,但是看着这些内容,好像还依稀记得这一行行代码当时被记录的情景.所以我想把这段回忆保存起来,为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. ** 此文

  • jQuery基础知识点总结(DOM操作)

    使用jQuery的方式来操作DOM更加的简洁.方便,统一的调用方式方便学习并且可降低学习成本. 1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css("color", "red"); ②设置多个样式(也可以设置单个) // 参数为 {}(对象) $(selector).css({"color": "red", "

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

    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入口函数与

  • jQuery基础_入门必看知识点

    jQuery事件的因果关系是怎么样的一个格式: $("button").click(function(){ }) [正式接触jQuery] (1)jQuery的书写步骤: 1.引入jQuery文件: 2.新建一对script标签来书写jQuery: 3.用jQuery的方式进行代码分离: 4.按照jQuery用谁就选谁的原则去书写代码: [jQuery的css修改] alert()弹出一个警示框:弹出的信息可以写在小括号里面作为参数: css() 1.单属性获取,格式css("

  • JS基础随笔(菜鸟必看篇)

    JS基础随笔(菜鸟必看篇)

    在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型 简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等 下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示 复杂数据类型:在栈内存储引用,如下图 在了解以上两种数据类型的存储方式之后可以区分

  • javaScript知识点总结(必看篇)

    javaScript知识点总结(必看篇)

    1.javaScript的概念:是一种表述语言,也是一种基于对象(Object)和事件驱动(EventDriven)的,安全性好的脚本语言,运行在客户端,从而减轻服务器端的负担,总结如下: 1.javaScript主要用来向HTML页面找那个添加交互行为. 2.javaScript是一种脚本语言,语法和java类似. 3.javaScript一般用来编写客户端脚本. 4.javaScript是一种解释性语言,边执行边解释. 2.javaScript由核心语法ECMAScript.浏览器对象模型(

  • Java final 修饰符知识点总结(必看篇)

    final从字面上理解含义为"最后的,最终的".在Java中也同样表示出此种含义. final可以用来修饰变量(包括类属性.对象属性.局部变量和形参).方法(包括类方法和对象方法)和类. 1. final修饰类: final修饰类即表示此类已经是"最后的.最终的"含义.因此,用final修饰的类不能被继承,即不能拥有自己的子类. 如果视图对一个已经用final修饰的类进行继承,在编译期间或发生错误. 2. final修饰方法: final修饰的方法表示此方法已经是&

  • EJB基础知识(入门必看)

    什么是EJB 可移植的,可重用的,可伸缩的业务应用程序的平台 为什么选择EJB 1. 易用性, 由EJB容器提供许多的服务, 开发人员只需要关注业务本身即可 2. 集成解决方案套装, 由应用服务器提供大量服务 3. 开放的JavaEE标准 4. 广泛的厂商支持 5. 稳定, 高质量的代码基础 6. 集群, 负载均衡, 故障转移 7. 易于开发允许可重用的组件 EJB容器提供的服务 1. 集成 2. 池化 3. 线程安全 4. 状态管理(针对有状态会话bean) 5. 消息服务器(针对消息驱动be

  • JavaScript基础教程——入门必看篇

    JavaScript基础教程——入门必看篇

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

  • python基础之入门必看操作

    python基础之入门必看操作

    这里提供在使用python进行开发中常使用到的方法技巧,如有不对欢迎批评指正. 要点:开发中类.变量特性查询,类型就是类,断言的使用,深浅复制判断等 python脚本文件是使用UTF-8编码的,所以在发现中文字符出现乱码时应当考虑是否文本文件采用UTF-8编码. 如果想指定不同的编码需要在源码文件中开头处添加这样的注释: # -*- coding: utf-8 -*- 如果python在linux和unix系统中运行,需要在源码的第一行添加: #!/usr/bin/python3 如何获取pyt

  • 关于javascript事件响应的基础语法总结(必看篇)

    1.onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用 //例子 <html> <head> <script type="text/javascript"> function add2(){ var numa,numb,sum; numa=6; numb=8; sum=numa+numb; document.write("两数和为:"+sum); }

随机推荐