首页
学习
活动
专区
圈层
工具
发布

jQuery基础

丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用...选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 四、jQuery有哪些版本?...五、查找标签 选择器 id选择器: $("#id") 标签选择器: $("tagName") class选择器: $(".className") 配合使用: $("div.c1") // 找到有c1...c1样式类的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签 属性选择器: [attribute

2.6K120

jQuery常用函数汇总

主要特点包括:简化的DOM操作: jQuery通过提供简洁的API,简化了对DOM元素的选择、遍历和操作,使得开发者能够更轻松地操作网页元素。...跨浏览器兼容性: jQuery的设计考虑了不同浏览器之间的兼容性,让开发者能够更好地处理不同浏览器的差异。插件生态系统: jQuery拥有丰富的插件生态系统,开发者可以利用这些插件来扩展和增强其功能。...获取元素//$(选择器)$('div')//获取页面中的所有div元素,返回的是jQuery对象get()参数为索引,返回值是原生对象eq()参数为索引,返回值为jQuery对象操作类名hasClass...,没有就增加查找元素parent()找到该元素的父级元素next()找到该元素紧挨的下一个兄弟节点prev()找到该元素紧挨的上一个兄弟节点nextAll()找到该元素下面所有兄弟节点传入选择器,找下面符合选择器的兄弟节点...prevAll()找到该元素上面所有兄弟节点传入选择器,找上面符合选择器的兄弟节点siblings()找到该元素的所有兄弟元素children()找到该元素的所有子元素find()通过参数类名找该元素下面的元素效果

70120
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jquery jQuery快速入门

    丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用...jQuery内容: 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 下载链接:jQuery官网 中文文档:jQuery AP中文文档 jQuery...选择器: $(".className") 配合使用: $("div.c1") // 找到有c1 class类的div标签 所有元素选择器: $("*") 组合选择器: $("#id, .className...:not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 例子: $("div:has(h1)")// 找到所有后代中有

    19.5K51

    前端之jQuery

    丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用...1.2jQuery的内容: 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 下载链接:jQuery官网 中文文档:jQuery AP中文文档...#id") 标签选择器: $("tagName") class选择器: $(".className") 配合使用: $("div.c1") // 找到有c1 class类的div标签 所有元素选择器:...匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签

    6.1K21

    JQuery的简述、使用方法和选择器

    JQ简述1 1、 jQuery出现的背景(Javascript遇到的问题) 选择器功能弱 DOM操作繁琐之极 浏览器兼容性不好 动画效果弱 2、什么是 jQuery(概念) jQuery...除非特殊要求,一般不会使用 3.x 版本的,很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。 注:推荐学习时使用1.x版本,功能更加完善,所学习到的东西更多。...使用前的准备 ? JQ中常用的选择器 一、基本选择器 1、id选择器 通过元素id获取相关元素 ? 2、元素选择器 获得body内的相关元素,如div、input等 ?...3、类选择器 通过元素类名获取相关元素,eq()方法获取元素,下标从0开始 ? 4、通用选择器 找到每一个元素 ? 5、分组选择器 找到匹配任意一个类的元素。 ?...五、表单选择器 匹配所有 input, textarea, select 和 button 元素 ? ---- JQuery的相关API,相关jquery文件,测试源代码已分享之网盘。

    1.9K10

    JQuery常用命令

    即使没有查找到需要的元素,JQuery 类数组对象也不会是 null/undefined,调用 JQuery 函数不会报错 (3)....JQuery 类数组对象提供的函数都自带 for 循环遍历每个查找到的元素 (4). JQuery 函数底层都是 DOM 操作,所以可和原生的 DOM 操作组合使用 (5)....JQuery 类数组对象的操作: window.$ window.Jquery $()函数或 JQuery()返回值是一个“类数组象”— 有点像数组,但不是 Array 类型的实例,其中封装着查找到的所有...JQuery 中的插件函数 Plugin:插件,在现有的功能基础上添加更多的功能,扩展整体的应用。 JQuery 中的插件(即函数)分为两类: (1)....JQuery 对象插件函数 JQuery 对象插件函数就是为所有的 jQuery 对象添加的公共函数,用于操作当前选定的 DOM 元素 声明方式:JQuery.fn.max = function( ){

    7.5K10

    前端组件整理

    提高精度的数字操作 浏览器增强类 让一些旧浏览器变牛逼的库 Selectivizr 让IE 6-8支持一些css3选择器 ieBetter 让ie6-8有高级浏览器的特性 ExplorerCanvas...表单元素美化 uniform 提供对下拉框,单,复选框,按钮等表单元素的美化 select2 多选下拉框 DropKick 下拉框,单,多选。...wowslider 幻灯切换时各种很炫的效果。收费。 cycle2 普通的幻灯,竟然不支持垂直滚动。。。 jcarousel 普通的幻灯,不兼容IE6 reveal 3d滚动。...我的改进版见这里 TheaterJS 模拟两个人在屏幕上对话 midnight.js 文字颜色随着背景变,屌炸了 color-animation jquery的颜色渐变动画插件。...transit 对元素进行css的变换 视觉差插件 scrollorama 比较简单 superscrollorama 能做的效果更多,但要用第三方Tween的库,使用起来比较复杂。

    14.2K40

    8个颜色选择器让你事半功倍!

    大家好,我是「前端实验室」爱分享的了不起~ 最近在开发中碰到关于颜色拾取器的需求,正好搜索了一些不错的JavaScript颜色选择器插件。这里把自己整理的内容分享给大家。 颜色选择器 1....ExColor ExColor是一个类似Photoshop样式的jQuery颜色拾取插件,其定制性非常高,通过参数设置可生成各种样式和效果的颜色拾取器。...Farbtastic Farbtastic是一个jQuery的颜色拾取插件(配合jQuery使用),可以非常轻松地将颜色选择器添加到Web页面中。...大小只有5K(不压缩的情况下),非常轻量。 7. jPicker jPicker是一个快速、轻量级的jQuery插件,让你的Web项目中可以包含一个高级颜色拾取器。...选择器的尺寸、位置和滑块面积都可以采用 CSS 自定义,就像设置 div 元素一样简单。 小结 本文未概括出所有的颜色拾取工具库。

    4.8K20

    jQuery

    丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用...jQuery内容 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 下载链接:jQuery官网 jQuery版本 1.x:兼容IE678,使用最为广泛的...找到有c1 class类的div标签 所有元素选择器 $("*") 组合选择器 $("#id, .className, tagName") 层级选择器 x和y可以任意选择器 $("x y");//...$("div").removeData("k"); //移除元素上存放k对应的数据 插件 jQuery.extend(object) jQuery 的命名空间下添加新的功能。

    5.4K50

    Web前端学习笔记之jQuery基础

    丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用...0x2 jQuery内容: 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 下载链接:jQuery官网 中文文档:jQuery AP中文文档...选择器: $(".className") 配合使用: $("div.c1") // 找到有c1 class类的div标签 所有元素选择器: $("*") 组合选择器: $("#id, .className...:not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 例子: $("div:has(h1)")// 找到所有后代中有

    4.1K20

    为什么要学jquery

    选择器 jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。...【查看jQuery文档】 jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。 所以我们平时真正能用到的只是少数的最常用的选择器。...var c = $.noConflict();//释放$的控制权,并且把$的能力给了c 插件 常用插件 插件:jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。...jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能。...使用插件 jquery.lazyload.js 懒加载插件 jquery.ui.js插件 jQueryUI专指由jQuery官方维护的UI方向的插件。

    1.6K10

    jquery第一次课的案例教程

    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。...【查看jQuery文档】 jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。 所以我们平时真正能用到的只是少数的最常用的选择器。...var c = $.noConflict();//释放$的控制权,并且把$的能力给了c 插件 常用插件 插件:jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。...jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能。...使用插件 jquery.lazyload.js 懒加载插件 jquery.ui.js插件 jQueryUI专指由jQuery官方维护的UI方向的插件。

    90110

    jQuery介绍与常见选择器的使用

    jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。...另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易的切入到jQuery的学习中来。...当用jQuery找到带有“.myClass”类的全部元素,然后隐藏它们时,无需循环遍历每一个返回的元素。...开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。...11.丰富的插件支持。jQuery的易扩展性,吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有成百上千的官方插件支持,而且还不断有新插件面世。 12.完善的文档。

    3.4K10

    前端学习之jQuery

    [5]  jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 二 什么是jQuery对象?...$("div").find(".test")  // find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。...向下查找兄弟标签: $(".test").next() //next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。  ...$("div").prevUntil() //获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。...$(".test").parentUntil() //获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。

    3.7K10

    jquery

    丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用...jQuery内容: 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 下载链接:jQuery官网 中文文档:jQuery AP中文文档 jQuery...选择器: $(".className") 配合使用: $("div.c1") // 找到有c1 class类的div标签 所有元素选择器: $("*") 组合选择器: $("#id, .className...:not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 例子: $("div:has(h1)")// 找到所有后代中有

    6.7K30

    前端架构师之01_JQuery

    通过 __proto__ 可以查看该对象的的原型(即jQuery本身)所具有的属性和方法。 2.2 jQuery选择器 jQuery选择器类似CSS选择器的机制的一种操作HTML元素的方式。...好处:可以轻松的获取DOM元素。 jQuery选择器的基本语法:$(选择器)。 根据选择器获取方式的不同大致可以将其分为以下几类。...基本选择器 层级选择器 基本过滤选择器 内容选择器 可见性选择器 属性选择器 子元素选择器 表单选择器 2.2.1 基本选择器 jQuery中基本的选择器,常用的分别为:标签选择器、类选择器和ID选择器...7.2 jQuery插件库 随着jQuery的发展,诞生了许多优秀的插件。 网站地址为:http://plugins.jquery.com/。 通过在搜索框中输入插件名即可搜索需要的插件。...编写自定义插件文件,利用封装jQuery对象方法的方式实现插件。 在HTML中,调用插件封装的方法,实现全选、反选以及全不选的功能。

    3.1K00

    jQuery学习笔记——jQuery基础

    (4)jQuery对象 二、选择器的使用 1、基本选择器 2、层级选择器 3、筛选选择器 总结 ---- 前言 什么是jQuery?...跨浏览器,支持的浏览器包括IE6~IE11和FireFox、Chrome等。 实现了JavaScript脚本和HTML代码的分离,便于后期编辑和维护。 插件丰富,可以通过插件扩展更多功能。...名称 用法 描述 id选择器 $("#id") 获取指定id的元素 全选择器 $("*") 匹配所有元素,*为正则表达式 类选择器 $(".class") Index页面的结构文件获取同一类clas的元素...标签选择器 $("div") 获取相同标签名的所有元素 并集选择器 $("div,p,li") 选取多个元素 交集选择器 $("li .current") 交集元素 如下,在控制台输入 $ ('.class...2、层级选择器 jQuery层级选择器:层级选择器可以完成多层级元素之间的获取。

    15.5K10

    Bootstrap快速入门

    其具有以下特性:完整的基础CSS插件;丰富的预定义样式表;基于jQuery的js插件集;非常灵活的响应式栅格系统,而且崇尚移动先行的思想。...该值为0;b是该css选择器上id数量的总和,一般为1个;c是用在该css选择器上的其他属性css选择器和伪类的总和,包括class(.btn)和属性css选择器li[id=red];d计算元素div和伪元素...常用js插件 在之前CSS的基础上,BootStrap自带12种jQuery插件,其利用bootstrap数据API,大部分插件可以在不编写任何代码的情况下触发。...Html布局规则:基于元素自定义属性的布局规则,比如使用类似于data-target的自定义属性 javascript实现步骤:所有插件都遵循jQuery插件开发的标准步骤,所有的事件保持统一IDE标准...DateTime Picker:非常强大的日期插件,功能和jQuery版的类似,但其风格和bootstrap更统一。

    5.2K61
    领券