iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >jQuery零基础入门知识点有哪些
  • 678
分享到

jQuery零基础入门知识点有哪些

2024-04-02 19:04:59 678人浏览 八月长安
摘要

这篇“Jquery零基础入门知识点有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jQ

这篇“Jquery零基础入门知识点有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jQuery零基础入门知识点有哪些”文章吧。

  jQuery = javascript + Query,是辅助JavaScript开发的类库,它的核心思想是写的更少,做的更多,注意:使用jQuery一定要先通过script标签的src属性引入jQuery库

  传入的参数为函数时,在html文档加载完成之后自动的执行这个函数

  传入的参数为HTML语言时,创建标签对象(jQuery对象)

  传入的参数为选择器字符串时:

  $(“#属性值”):id选择器,根据id查询标签对象(jQuery对象)$(“标签名”):标签名选择器,根据指定的标签名查询标签对象(jQuery对象)$(“。属性值”):类选择器,根据class属性值查询标签对象(jQuery对象)

  传入的参数为DOM对象时,会把这个DOM对象转换为jQuery对象

  通过getElement(s)Byxxx或createElement()得到的标签对象是DOM对象DOM对象Alert出的效果是:[object HTML标签名 Element]

  通过$函数创建的对象是jQuery对象,如二(2): 通过jQuery包装的DOM对象是jQuery对象,如二(4)通过$函数查询到的对象也是jQuery对象,如二(3)jQuery对象Alert出的效果是:[object Object]

  jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数

  DOM对象转换为jQuery对象:

  先有DOM对象$(DOM对象)就可转换为jQuery对象

  jQuery对象转换为DOM对象:

  先有jQuery对象jQuery对象[下标]即可取出对应的DOM对象

  3.

  jQuery对象。click( function(){} );添加点击响应函数jQuery对象。CSS(“background-color”,“xxx”);可设置背景颜色jQuery对象。val();可以获取、赋值表单项的value属性jQuery对象。each(function(){});遍历DOM对象数组的方法,function中写每次遍历到的对象要执行的方法,function中使用this代表当前遍历到的DOM对象

  代码示例:

  详细可参考jQuery文档,文档获取方式在文章末尾

  #id :根据id查找标签对象element :根据标签名查找标签对象。class :根据class查找标签对象*:查找所有元素的标签对象selector1,selector2…selectorN :合并选择器1,选择器2…选择器N的标签对象并返回

  ancestor descendant :在给定的祖先元素下匹配所有的后代元素parent > child :在给定的父元素下匹配所有的子元素prev + next :在同级的情况下匹配所有紧接在prev元素后的next元素prev —— siblings :在同级的情况下匹配prev元素之后的所有siblings元素

  注意:标签名前置,即冒号之前为标签名

  :first :获取匹配的第一个元素:last :获取匹配的最后一个元素:not(selector) :去除所有与给定选择器匹配的元素:even :匹配所有索引值为偶数的元素,从0开始计数:odd :匹配所有索引值为奇数的元素,从0开始计数:eq(index) :匹配一个给定索引值的元素(索引从0开始计数):gt(index) :匹配所有大于给定索引值的元素(索引从0开始计数):lt(index) :匹配所有小于给定索引值的元素(索引从0开始计数):header :匹配如h2、h3、h4之类的标题元素:animated :匹配所有正在执行动画效果的元素

  注意:标签名前置,即冒号之前为标签名

  :contains(text) :匹配包含给定文本的元素:has(selector) :匹配含有选择器所匹配的的元素的元素:empty :匹配所有不包含子元素或文本的空元素:parent :匹配含有子元素或文本的元素

  5.属性过滤选择器

  注意:标签名前置,即中括号之前为标签名

  :匹配包含给定属性的元素 :匹配给定的属性是某个特定值的元素 :匹配所有不含有指定的属性或属性不等于特定值的元素:匹配给定的属性是以某些值开始的元素 :匹配给定的属性是以某些值结尾的元素 :匹配给定的属性是以包含某些值的元素 :复合属性选择器,需要满足多个条件时使用

  注意:标签名前置,即冒号之前为标签名

  :input :匹配所有input标签元素,不论type为哪种类型:text \ :passWord \ :radio \ :checkbox \ :submit \ :image \ :reset \ :button \ :file \ :hidden :匹配所有input标签中type为指定类型的元素:enabled :匹配所有可用元素(disabled属性设置为disabled为不可用:无法填入内容或选中):disabled :匹配所有不可用元素:checked :匹配所有被选中的元素(复选框、单选框等,不包括select中的option):selected :匹配所有选中的option元素

  详细可参考jQuery文档,文档获取方式在文章末尾

  last():获取最后一个元素(功能跟:last一样)first():获取第一个元素(功能跟:first一样)eq():获取给定索引的元素(功能跟:eq()一样)filter(exp):留下匹配的元素is(exp):判断是否匹配给定的选择器,只要有一个匹配就返回truehas(exp):返回包含有匹配选择器的元素的元素(功能跟:has一样)not(exp):删除匹配选择器的元素(功能跟:not一样)children(exp):返回匹配给定选择器的子元素(功能跟parent>child一样)find(exp):返回匹配给定选择器的后代元素(功能跟ancestordescendant-样)next():返回当前元素的下一个兄弟元素(功能跟prev + next功能一样)nextAll():返回当前元素后面所有的兄弟元素(功能跟prev—— siblings 功能一样)nextUntil():返回当前元素到指定匹配的元素为止的后面元素parent():返回父元素prev(exp):返回当前元素的上一个兄弟元素prevAll():返回当前元素前面所有的兄弟元素prevUnit(exp):返回当前元素到指定匹配的元素为止的前面元素siplings(exp):返回所有兄弟元素add():把add 匹配的选择器的元素添加咧当前jquery 对象中

  不传参数是获取,传递参数是设置

  html()方法:可以设置和获取起始标签和结束标签中的内容(包括两边的标签)text()方法:可以设置和获取起始标签和结束标签中的文本(不包括两边的标签)val()方法:可以设置和获取表单项的value属性值

  代码示例:val()方法可同时设置多个表单项的选中状态

  attr()方法:可以设置和获取属性的值,不推荐操作checked、selected、disabled、readOnly,还可以操作自定义属性。prop()方法:可以设置和获取属性的值,只推荐操作checked、selected、disabled、readOnly

  代码示例:

  代码示例:全选、全不选、反选

  appendTo():a.appendTo(b) 把a插入到所有b子元素的末尾,成为最后一个子元素prependTo():a.prependTo(b) 把a插入到所有b子元素的前面,成为第一个子元素

  insertAfter():a.insertAfter(b) 同级的情况下得到bainsertBefore():a.insertBefore(b) 同级的情况下得到ab

  replaceWith():a.replaceWith(b) 用一个b替换掉所有areplaceAll():a.replaceAll(b) 用a替换掉所有b(有几个b就替换几次)

  remove():a.remove() 删除a标签及其所有内容(包括文字或子标签等)empty():a.empty() 清空a标签的内容(包括文字或子标签等),标签留下

  代码示例:两个复选框的内容从左到右、从右到左的练习

  动态添加、删除表格记录

  addClass():添加样式

  removeClass():删除样式

  toggleClass():有则删除,无则添加样式

  offset():获取和设置元素的坐标,设置时必须有两个属性top和left

  设置时的格式:jQuery对象。offset({top:值,left:值});

  以下动画方法都可以添加参数:

  第一个参数是动画执行的时长,以毫秒为单位

  第二个参数是回调函数:function(){},即动画完成之后自动执行的函数

  基本动画:

  show():将隐藏的元素显示

  hide():将显示的元素隐藏

  toggle():显示则隐藏,隐藏则显示

  淡入淡出动画:

  fadeIn:淡入fadeOut():淡出fadeToggle():淡入/淡出切换fadeTo():在指定时长内将透明度修改到指定的值,0代表透明,1代表可见,0.5代表半透明

  第一个参数指定时长(ms),第二个参数设置透明度,第三个参数设置回调函数

  触发时间:

  jQuery是浏览器的内核解析完页面的标签(如body中的标签),创建好DOM对象之后就会立马执行,此时页面上没有任何内容js是浏览器的内核解析完标签创建好DOM对象之后等标签显示时的内容(如图片,网页等)加载完成之后执行,此时页面上已经有body中的内容 触发顺序:jQuery先、JS后各有多个时执行的次数:

  jQuery所有function函数都会按照顺序执行JS只会执行最后一个function函数

  click():可以绑定单击事件(参数中传function(){}),可以触发单击事件(参数中无function)mouseover():鼠标移入事件mouseout():鼠标移出事件bind():可以给元素一次性绑定一个或多个事件,第一个参数加双引号,其中放空格隔开的多个事件,第二个参数是function(){},即事件响应后的代码one():用法与bind一致,但是one方法绑定的事件只会响应一次unbind():与bind方法相反的操作,解除事件的绑定live():用来绑定事件,即使这个元素先前并未绑定,而是后面动态创建出来的也自动绑定

  事件的冒泡是指父子元素绑定同一个事件时,当触发子元素的事件时,父元素的同一个事件也随之自动的响应,如:

  阻止事件的冒泡发生:在子元素的事件函数体内return false;

  事件对象:包含触发的事件的所有信息的一个对象获取事件对象的方式:在给元素绑定事件时函数格式为function(event){},参数中的名字可任意,一般取名为event,这个event就是事件对象

以上就是关于“jQuery零基础入门知识点有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网VUE频道。

--结束END--

本文标题: jQuery零基础入门知识点有哪些

本文链接: https://www.lsjlt.com/news/91521.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery零基础入门知识点有哪些
    这篇“jQuery零基础入门知识点有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jQ...
    99+
    2024-04-02
  • jQuery入门基础知识点有哪些
    这篇文章主要为大家展示了“jQuery入门基础知识点有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery入门基础知识点有哪些”这篇文章吧。什么是jQ...
    99+
    2024-04-02
  • 零基础入门HTML的知识点有哪些
    这篇文章主要介绍“零基础入门HTML的知识点有哪些”,在日常操作中,相信很多人在零基础入门HTML的知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”零基础入门HTM...
    99+
    2024-04-02
  • XHTML基础入门知识点有哪些
    本篇内容主要讲解“XHTML基础入门知识点有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“XHTML基础入门知识点有哪些”吧!...
    99+
    2024-04-02
  • JavaScript基础入门知识点有哪些
    这篇文章给大家分享的是有关JavaScript基础入门知识点有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript简介JavaScript(Java脚本)是一种基于对象(Object)和事件驱动...
    99+
    2023-06-27
  • mysql入门基础知识点有哪些
    本篇内容介绍了“mysql入门基础知识点有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、开始使用M...
    99+
    2024-04-02
  • Html基础入门知识点有哪些
    这篇文章主要介绍“Html基础入门知识点有哪些”,在日常操作中,相信很多人在Html基础入门知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Html基础入门知识点有...
    99+
    2024-04-02
  • Opengles2.0入门基础知识点有哪些
    Opengles 2.0入门基础知识点包括以下内容:1. 绘图基础:了解2D和3D图形的概念,理解坐标系统和图形渲染的过程。2. O...
    99+
    2023-09-20
    Opengles
  • Python零基础知识点有哪些
    这篇“Python零基础知识点有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Python零基础知识点有哪些”文章吧。P...
    99+
    2023-06-17
  • jQuery基础知识点有哪些
    这篇文章将为大家详细讲解有关jQuery基础知识点有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery语法实例$(this).hide()jQuery 的 h...
    99+
    2024-04-02
  • Linux grep基础入门知识点有哪些
    这篇文章主要介绍了Linux grep基础入门知识点有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Linux grep基础入门知识点有哪些文章都会有所收获,下面我们一起来看看吧。grep 指令用于查找内容...
    99+
    2023-06-27
  • HTML入门基础的知识点有哪些
    这篇文章给大家分享的是有关HTML入门基础的知识点有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。标记、标签、元素标签和元素通常是描述同样的意思,但是严格来说,一个HTML元...
    99+
    2024-04-02
  • jQuery入门知识点有哪些
    这篇文章主要介绍“jQuery入门知识点有哪些”,在日常操作中,相信很多人在jQuery入门知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jQuery入门知识点有...
    99+
    2024-04-02
  • Java入门基础知识有哪些
    这篇文章主要介绍“Java入门基础知识有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Java入门基础知识有哪些”文章能帮助大家解决问题。Java 是由Sun Microsystems公司于19...
    99+
    2023-06-02
  •  typeScript入门基础知识有哪些
    本文小编为大家详细介绍“ typeScript入门基础知识有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“ typeScript入门基础知识有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知...
    99+
    2023-06-29
  • MySQL基础入门知识有哪些呢
    MySQL基础入门知识有哪些呢,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。  MySQL是一个关系型数据库管理系统,由瑞典MySQL A...
    99+
    2024-04-02
  • jQuery选择符基础知识点有哪些
    这篇文章主要为大家展示了“jQuery选择符基础知识点有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery选择符基础知识点有哪些”这篇文章吧。其实 ...
    99+
    2024-04-02
  • JavaScript基础知识:零基础入门,快速上手
    2. 数据类型 JavaScript有六种基本数据类型: 数字:代表数字值,可以是整数或小数。 字符串:代表文本值,必须用引号括起来。 布尔值:代表真或假的值。 null:表示空值。 undefined:表示未定义的值。 对象:表示一个...
    99+
    2024-02-08
    1. JavaScript简介 JavaScript是一种脚本语言 通常用于Web开发。它是一种解释型语言 这意味着它不需要编译 可以直接在浏览器中运行。JavaScript是一种面向对象的语言
  • Redis数据库入门基础知识有哪些
    本篇文章为大家展示了Redis数据库入门基础知识有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。  Redis是一个开源的使用ANSIC语言编写、支持网络、可基...
    99+
    2024-04-02
  • MongoDB基础知识点有哪些
    这篇文章主要介绍MongoDB基础知识点有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!NO.1 Linux下MongoDB的安装   Linux下MongoDB的安装还算简单,总体可以分为如...
    99+
    2023-06-14
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作