登录
首页 > 汽车资讯 > 了解jquery这一篇够了

了解jquery这一篇够了

发布时间:2023-11-26 11:24:04 发布用户: 15210273549

为什么要学jquery
现在的「新人」依然可以学习 jQuery 的思想,因为以「新人」的水平,直接理解 Vue / React 的思想难度较大,jQuery 是一个很不错的中间过渡

使用javascript开发过程中,有许多的缺点:

  1. 查找元素的方法单一,麻烦。
  2. 遍历数组很麻烦,通常要嵌套一大堆的for循环。
  3. 有兼容性问题。
  4. 想要实现简单的动画效果,也很麻烦
  5. 代码冗余。

体验jquery的使用

/*
* 1. 查找元素的方法多种多样,非常灵活
* 2. 拥有隐式迭代特性,因此不再需要手写for循环了。
* 3. 完全没有兼容性问题。
* 4. 实现动画非常简单,而且功能更加的强大。
* 5. 代码简单、粗暴。
* */
$(document).ready(function () {
    $("#btn1").click(function () {
        $("div").show(200);
    });
    $("#btn2").click(function () {
        $("div").text("我是内容");
    });
});

jquery到底是什么

jQuery的官网 http://jquery.com/
jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。

What is jQuery?

   jQuery is a fast, small, and feature-rich JavaScript library. 
   It makes things like HTML document traversal and manipulation, 
   event handling, animation, and Ajax 
   much simpler with an easy-to-use API that works across a multitude of browsers. 
   With a combination of versatility and extensibility, 
   jQuery has changed the way that millions of people write JavaScript. 

js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。
(animate.js、common.js)

我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,
其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。

jquery的版本问题

官网下载地址:
http://jquery.com/download/
jQuery版本有很多,分为1.x 2.x 3.x
1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。

大版本分类:

  • 1.x版本:能够兼容IE678浏览器
  • 2.x版本:不能兼容IE678浏览器
  • 3.x版本:不能兼容IE678浏览器,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)

关于压缩版和未压缩版:

  • jquery-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,但是基本没有颗阅读性。
  • jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。

jquery的入口函数

使用jQuery的三个步骤:

  1. 引入jQuery文件
  2. 入口函数
  3. 功能实现

关于jQuery的入口函数:

//第一种写法
$(document).ready(function() {
	
});
//第二种写法
$(function() {
	
});

jQuery入口函数与js入口函数的对比:

  1. JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
  2. jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

jq对象和dom对象(重要)

  1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
  2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
  3. jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合(伪数组)
  4. DOM对象与jQuery对象的方法不能混用。

DOM对象转换成jQuery对象:【联想记忆:花钱】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象:

var $li = $("li");
//第一种方法(推荐使用)
$li[0]
//第二种方法
$li.get(0)

jquery选择器

什么是jQuery选择器

  • jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。
    注意:jQuery选择器返回的是jQuery对象。
  • jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多扩展性的选择器。
    【查看jQuery文档】
  • jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。
    所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器

名称

用法

描述

ID选择器

$(“#id”);

获取指定ID的元素

类选择器

$(“.class”);

获取同一类class的元素

标签选择器

$(“div”);

获取同一类标签的所有元素

并集选择器

$(“div,p,li”);

使用逗号分隔,只要符合条件之一就可。

交集选择器

$(“div.redClass”);

获取class为redClass的div元素

总结:跟css的选择器用法一模一样。

层级选择器

名称

用法

描述

子代选择器

$(“ul>li”);

使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素

后代选择器

$(“ul li”);

使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

总结:跟css的选择器用法一模一样。

过滤选择器

名称

用法

描述

:eq(index)

$(“li:eq(2)”).css(“color”, ”red”);

获取到的li元素中,选择索引号为2的元素,索引号index从0开始。

:odd

$(“li:odd”).css(“color”, ”red”);

获取到的li元素中,选择索引号为奇数的元素

:even

$(“li:even”).css(“color”, ”red”);

获取到的li元素中,选择索引号为偶数的元素

总结:这类选择器都带冒号

筛选选择器(方法)

名称

用法

描述

children(selector)

$(“ul”).children(“li”)

相当于$(“ul>li”),子类选择器

find(selector)

$(“ul”).find(“li”);

相当于$(“ul li”),后代选择器

siblings(selector)

$(“#first”).siblings(“li”);

查找兄弟节点,不包括自己本身。

parent()

$(“#first”).parent();

查找父亲

eq(index)

$(“li”).eq(2);

相当于$(“li:eq(2)”),index从0开始

next()

$(“li”).next()

找下一个兄弟

prev()

$(“li”).prev()

找上一次兄弟

总结:筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。

汽车资讯更多>>

火热直播溢芬芳,大岭镇黄花村君子兰网上开出“致富花” 百年中国照相馆人像收藏展上见证PS结合的爱情信物 刘德华获银紫荆星章,还有哪些明星曾被港府授勋 上合峰会召开在即,中俄最高层将出席,印度降级参会,莫迪不来了 本田思域也守不住合资轿车销量前十的阵地,越卖越少了 现款售26.69万,纯电续航大幅提升!岚图FREE 318将预售 捷途山海百店联合开业暨山海 T2 上市 贵阳汽车工业店正式开业 科技平权再进阶 哪吒L纯电版预售14万起! 蔚来与塞切尼·伊什特万大学基金会签署战略合作备忘录 官宣!全新途观L PRO将在5月30日上市,两种造型,3块大屏 BESPOKE LUXURY LIFESTYLE 赏臻品至美之作 鉴高定奢华之旅 出手即高手! 广汽城市NDA是怎样炼成的? 瑞虎8车队奋勇集结 将再战“亚洲达喀尔”环塔拉力赛 三款热门纯电SUV大PK,谁能摆脱晕车魔咒? 12.99万元!奇瑞风云T9用“移动城堡”来平权豪华 “以旧换新”政策来袭,东风风行再加码10亿,风行游艇享万元补贴 售价12.99万元起,星途凌云王者版上市,提供两种动力可选 “好而不贵”的零跑C16,缺了这三样,可就“大而不全”了 翼真L380开启惊喜预订,“陆地空客”即将正式启航! 2024款哪吒L红衣版新车商品性评价 21.99万,你会买乐道L60吗? 北欧来客沃尔沃EX30,售20.08万起,极简外表蕴藏硬核内心 义乌启动住房“焕新购” 鼓励市民“买新卖旧” 国乒奥运会名单公布后,27岁的樊振东发文称是其“最后一舞” 走进博物馆 感受文物魅力 又一年戛纳红毯,巩俐、赵涛、彭于晏、关晓彤、佟丽娅都来了 长安系重磅新车密集曝光:全新CS75PLUS轴距加长,深蓝S05首曝 哪吒L开启交付, 哪吒汽车CEO张勇亲自交车 电动的路特斯还是原来的路特斯吗? 连大G都“电动”了,以后燃油车会变成“小众奢侈品”吗?
Copyright 2009-2023 奥运星 版权所有  京ICP备18049689号-19