(本文年代久远,请谨慎阅读)今天学习了JQuery的一些基本用法,包括JQuery选择器和JQuery包装集; 从现在开始,要慎重区分DOM对象和JQuery对象,两种对象的方法不同,属性不同,在使用中要特别注意...(“id”); JQuery对象获取方法: 单个对象:var objDiv = $ (“#Id"); 多个对象:var arrObj = $('div'); //警告:此处是JQuery语法形式,但依然是...而在JQUERY中则完全不同,JQUERY提供了异常强大的选择器用来帮助我们获取页面上的对象,并且将对象以JQUERY包装集的形式返回。 "$"符号在JQUERY中代表对JQUERY框架集的引用。...JQUERY选择器包括以下几种: 1、基础选择器 2、层次选择器 3、基本过滤器 4、内容过滤器 5、可见性过滤器 6、属性过滤器 7、子元素过滤器 8、表单选择器 9、表单过滤器 下面列出几种重要的选择器...$("input[id][name$='...']")复合属性选择器,需要同时满足多个条件时使用 [id][name$='...']
为什么要学jquery ? 简单,粗暴 没有兼容性问题 //2. 什么是jquery?js库,说白了就是js文件,里面有一大堆的方法 //3. 使用jquery的步骤: 1....() { // // }); //选择器 //基本选择器 标签 类 id选择器 交集 并集 //层级选择器: 子代 后代 //过滤选择器: //:...操作样式 (5) //1.1 css操作 //设置单个样式 //设置多个样式 //获取样式 //1.2 class操作 //addClass(name...操作属性(3) //2.1 attr //设置单个属性 //设置多个属性 //获取属性 //2.2 prop //对于布尔类型的属性,disabled...,selected,checked,只能用prop //2.3 removeAttr(name):移除某个属性 //3.
下列三个是核心的jQuery选择器,我们在处理各种element元素的时候基本都是通过这三个选择器来完成获取信息的,所以这里我们需要记录一下笔记。...选择器 功能 返回值 #id 根据 id 属性值选取元素 单个元素 .class 根据 class 属性值选取元素 元素集合 element 根据给定的标签名选取元素 元素集合 #id 选择器选取带有指定...id 引用 HTML 元素的 id 属性。 注意:id 属性在文档内必须是唯一的。 注意:不要使用数字开头的 id 属性!在某些浏览器中可能出问题。...class 属性用于为多个 HTML 元素设置特定样式。 注意:不要使用数字开头的 class 属性!在某些浏览器中可能出问题。...选择器 功能 返回值 first() 或 :first 获取第一个元素 单个元素 last() 或 :last 获取最后一个元素 单个元素 :not(selector) 获取除给定选择器之外的所有元素
在JavaScript选项卡中链接的JavaScript文件对于所有操作只包含一次。脚本链接将根据src属性(不区分大小写)进行合并。...有关选择器语法的内容,可以参照https://www.w3school.com.cn/html/index.asp,这里只列出几个主要和常见的用法 1、使用ID选择页面上的单个元素,而使用class...样式名称选择相似类型的多个元素,如: 2、属性选择器 选择器 1、一般都使用JQuery选择器: 所有Selector (“*”): 选择所有元素....为了循环遍历这些项,JavaScript必须为每个项设置一个函数 使用循环时,结合控制条件和控制变量变化, 在定义循环时将控制条件和控制变量结合起来, 如果你只是对数组中的某些项进行迭代,你可以通过翻转迭代并使用...用户类选择器 使用Java Script选项卡输入JQuery代码。
; }) }); $是在jQuery中使用的变量名,可以使用 jQuery.noConflict()避免冲突,它的返回值就是jQuery对象。...常规选择器 $("*") 选择所有节点 $("#id") ID选择器,注意其中的一些特殊字符,如 . $(".class") 类选择器 $("tag") 标签选择器 $("子元素") $("直接子元素"...属性选择器 [name~="value"] 属性中包括某单词 [name="value"] 属性完全等于指定值 [name!...="value"] 属性不等于指定值 [name] 包括有指定属性的元素 3....其他选择器 [name="value"][name2="value2"] 多个AND条件 ("selector1, selector2, selectorN") 多个OR条件 :not() 否定选择 (
Ajax 交互 选择器 符号$表示 jQuery 对象,$函数通常也被称为 jQuery 的工厂函数,jQuery 的操作基本上都以$( )开始,所有选择器都放在这个括号中,例如$("#title")将返回一个...jQuery 选择的 HTML 元素,在返回 jQuery 对象之后,就可以调用由 jQuery 提供的丰富的 API 来完成相应的操作了 基本选择器,通过元素标签名,元素 ID,Class 来查找...DOM 元素,基本选择器共有五种,总结如下: 选择器 返回 示例 元素标签选择器 集合元素 $("p") 选取所有的 元素 ID 选择器 单个元素 $("#title") 选取 ID 为 test...,按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器,总结如下: 选择器 返回 示例 :first 单个元素 $("div:first")....removeAttr(); 追加一个类 .addClass('cls'); 移除多个类 .removeClass('cls1, cls2'); 创建节点 var $li = $("苹果</li
在使用jQuery时,需要注意jQuery对象和DOM对象的区别,通常对于jQuery对象,会在变量前加$,如var $variable=jQuery对象;。可以通过如下方式对两者进行转化。...('cr');var $cr = $(cr); 此外,在使用多个不同的javascript库时,有可能会出现库之间的冲突,可以通过如下方式解决。...;}); //推荐下面的方式 var $j = jQuery.noConflict(); $j(function() {}); 在介绍jQuery选择器之前,首先引入CSS选择器,如下表所示。...通配选择器 *{} 其他选择器 伪类选择器、子选择器、临近选择器和属性选择器 那么相应的jQuery也会提供对应的选择器,并增加部分自定义的选择器用于方便操作,主要包括基本选择器、层次选择器、过滤选择器...获取属性值:var p_txt = $('p').attr('title'); 设置属性值:$('p').attr('title', 'title xionger'); 删除属性:$('p').removeAttr
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。...它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头:$()。...使用jquery请先引入 jquery.com/jquery-3.1.1.min.js"> 元素选择器 $(this)...[class~=text]") //选取拥有class属性以空格分割的值中含有text的input元素 [attribute1][attribute2][attributeN] //合并多个属性过滤选择器...选取索引是偶数的所有元素,索引从0开始,返回元素集合 :odd //选取索引是奇数的所有元素,索引从0开始,返回元素集合 :eq(index) //选取索引等于index的元素,索引从0开始,返回单个元素
在jQuery库中实际上定义了一个jQuery()方法,它是jQuery库的核心。我们调用该方法并传入指定的参数,就可以返回一个jQuery实例对象,该对象中包含匹配的一个或多个DOM元素。...在jQuery中,我们一般通过一个字符串来标识匹配的元素,例如: $("#uid"); // 选取id属性为"uid"的单个元素 $("p"); // 选取所有的p元素 $(".test"); // 选择所有带有...和CSS选择器一样,jQuery选择器也支持多个选择器任意组合使用。...,将匹配同时满足这些选择器条件的元素 $("p#uid"); // 选择id属性为"uid"的p元素 $("div.foo"); // 选择所有带有CSS类名"foo"的div元素 $(".foo.bar...属性操作 在jQuery中,对DOM元素进行属性操作,主要是通过以下方法实现的: // selector 表示具体的选择器 $("selector").val(); // 获取第一个匹配元素的value
通过 过滤选择呢亲选择元素 (1) 基本过滤选择器 (2) 可见性过滤选择器 详解: 通过css选择器选取元素 jQuery支持大多数css选择器 最常用的有:基本选择器,层次选择器和属性选择器 在jQuery...基本选择器 1. 继承了css选择器的语法和功能 2. 主要由元素标签名,class,id和多个选择器组成 3. 可以实现大多数页面元素的查找 4. ...在层次选择呢亲中,后代选择器和子选择器较为常用,而相邻元素选择器和同辈元素选择器在jQuery中可以用更加简单的方法代替: (1)使用next()房代替prev-next(相邻元素选择器) (2)使用nextAll...条件属性选择器 条件属性选择器共包括6种,其中[attribute!=value]选择器是jQuery自己拓展的选择器 [attribute!=value] [attribute!...Css:type=”hidden” 隐藏域 在可见性选择器中需要注意的是,选择器 :hidden获取的元素不仅包括样式属性display为“none”的元素,还包括文本隐藏域和visibility:hidden
属性过滤选择器 ——4.1 [attribute](取拥有attribute属性的元素) 下面的代码,最后一个a标签没有title属性,所以它仍然会带下划线 <script type="text/javascript...value开始,以value结束,或包含value值) 在属性选择器中,^$符号和正则表达式的开始结束符号表示的含义是一致的,*模糊匹配,类似于sql中的like '%str%'。...](复合型属性过滤器,同时满足多个条件) 将title以"jQuery"开始,并且class="item"的a标签隐藏,那么jQuery事件大全" class="item...:reset(取重置按钮元素) :reset选择器和属性选择器$('input[type=reset]')等同 7....:file(取上传域元素) :file选择器和属性选择器$('input[type=file]')等同 9.
() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 2....网页上有 5 个 元素,如何使用 jQuery来选择它们?(答案) 另一个重要的 jQuery 问题是基于选择器的。...如果你在调用attr()的同时带上一个值 例如. attr(name, value), 这里name是属性的名称,value是属性的新值。 ...() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 2....网页上有 5 个 元素,如何使用 jQuery来选择它们?(答案) 另一个重要的 jQuery 问题是基于选择器的。
(function(){}); - jQuery的选择器 - 基本选择器:★ - * 所有 - # id - .class - 标签选择器(标签名) - 多个选择器用...- attr():设置或者获取元素的属性 - 设置属性(给标签添加属性) - 格式1:设置单个属性 "jq对象.attr("属性名","值");...jQuery和html整合: 1.下载 2.通过script标签的src属性引入即可(1.11) jQuery语法: $("选择器"); 或 jQuery("选择器"); jq对象和...: 基本选择器: * #id .class 标签名称 多个选择器之间使用逗号 层次选择器: a b a>b a+b a~b 基本过滤选择器...left: 操作属性: attr: 设置属性: 设置单个: jq对象.attr("属性名称","值"); 设置多个: jq对象.attr({
在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配类的名称就可以被类选择器选取到。...(可以是ID选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号”,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的...属性选择器就是通过元素的属性作为过滤条件进行筛选对象 [attribute] 说明:匹配包含给定属性的元素 示例:(“div...div元素 [selector1][selector2][selectorN] 说明:复合属性选择器,需要同时满足多个条件时使用 示例:...@符号问题: 在jQuery升级版本过程中,jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留的@符号,假如我们使用1.3.1以上的版本,那么不需要在属性前添加@符号 (“div[@name=
() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 2....网页上有 5 个 元素,如何使用 jQuery来选择它们?(答案) 另一个重要的 jQuery 问题是基于选择器的。...在面试过程中,你有很大几率会被要求使用 ID 选择器和 class 选择器来写代码。...(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。...如果你在调用attr()的同时带上一个值 例如. attr(name, value), 这里name是属性的名称,value是属性的新值。
"> 核心:$ 符号在jQuery中代表对jQuery的引用。...为blue的元素 通用选择器 $("*") 选择页面所有元素 组合选择器 $("#mydiv,span,.blue") 同时选中多个选择器匹配的元素 在需要使用jQuery的页面引入jQuery核心js文件 --> jquery-3.6.4.js"> /* id选择器 */...-- 在需要使用jQuery的页面引入jQuery核心js文件 --> jquery-3.6.4.js"> // 后代选择器 var...-- 在需要使用jQuery的页面引入jQuery核心js文件 --> jquery-3.6.4.js"> /* 获取属性 */ /
为什么使用 jQuery ? 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。...jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。...jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素。...']") //多属性选过滤,同时满足两个属性的条件的元素 [name]$("div[id]") [name$="value"]$("input[name$='letter']") [name="value...jQuery attr() – 设置 多个属性值 使用jQuery attr() 方法设置多个属性值。
("name"); // DOM 对象 var $jquery = $(dom); // jQuery 对象 1.2 jQuery 选择器 jQuery 选择器允许对 HTML 元素组或单个元素进行操作...jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找或选择 HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。...按照不同的过滤规则,过滤选择器分为:基本过滤选择器,内容过滤选择器,可见性过滤选择器,子元素过滤选择器和表单对象属性过滤选择器 ☞ 基本过滤选择器 ? ☞ 内容过滤选择器 ?...☞ 可见性过滤选择器 ? ☞ 属性过滤选择器 ? ☞ 子元素过滤选择器 ? ☞ 表单对象属性过滤选择器 ?...fadeOut([speed],[easing],[fn]) fadeToggle([speed],[easing],[fn]]) 1.5 遍历 1.5.1 JS 遍历方式 for(初始化值;循环结束条件
jQuery 选择器 选择器同意对元素组或单个元素进行操作。 jQuery 元素选择器和属性选择器同意通过标签名、属性名或内容对 HTML 元素进行选择。...在 HTML DOM 术语中:选择器同意对 DOM 元素组或单个 DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。...jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $(“[href]”) 选取全部带有 href 属性的元素。...jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。...在某些浏览器中可能出问题。 不要使用数字开头的类名!在某些浏览器中可能出问题。 详细使用时,能够參考“jQuery 选择器參考手冊”。看看有哪些选择器。
class属性值匹配的元素; 4)并集选择器:$("选择器1,选择器2"),获取多个选择器选中的所有元素。...2.2 层级选择器 层级选择器包括两类: 1)后代选择器:$("A B "),选择A元素内部的所有B元素; 2)子选择器:$("A>B"),选择A元素内部的所有B子元素; 【练习案例】:在2.1程序基础上...2.3 属性选择器 属性选择器包括三类: 1)属性名称选择器:$("A[属性名]"),包含指定属性的选择器 2)属性选择器:$("A[属性名= ‘值’]"),包含指定属性等于指定值的选择器 3)复合属性选择器...,包含多个属性条件的选择器 【练习案例】:主要看标签中的内容,注意各种条件的写法 属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>