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

01-老马jQuery教程-jQuery入口函数及选择器

install jquery 2.入口函数介绍 2.1window.onload事件的问题 在之前DOM课 中咱们已经说过用window的onload事件作为JS代码的入口,时机并不好。...jQuery的1.x版本支持ie6~8浏览器,而且还支持丰富的CSS选择器选择元素。 3.2 id选择器 id选择器就是根据标签的id获取dom的包装对象。...3.3 jQuery的包装对象和DOM对象 通过jQuery的选择器选择出来的对象都是jQuery的包装对象,里面封装了jQuery的很多API方法,后续我们会一一学习。...这里简单说一点: jQuery包装对象本身是一个伪数组,选择器返回的所有的DOM元素都会存在jQuery的包装对象中,并且还有很多其他的jQuery特有的api。...oddTrs.css('backgroundColor', '#aaa'); // jQuery:如果包装对象里面元素是多个时候,做设置操作会影响包装对象中的所有dom对象。

3.2K100

01-老马jQuery教程-jQuery入口函数及选择器

download/ npm方式安装npm install jquery bower方式安装bower install jquery 2.入口函数介绍 2.1window.onload事件的问题 在之前...jQuery的1.x版本支持ie6~8浏览器,而且还支持丰富的CSS选择器选择元素。 3.2 id选择器 id选择器就是根据标签的id获取dom的包装对象。...3.3 jQuery的包装对象和DOM对象 通过jQuery的选择器选择出来的对象都是jQuery的包装对象,里面封装了jQuery的很多API方法,后续我们会一一学习。...这里简单说一点: jQuery包装对象本身是一个伪数组,选择器返回的所有的DOM元素都会存在jQuery的包装对象中,并且还有很多其他的jQuery特有的api。...oddTrs.css('backgroundColor', '#aaa'); // jQuery:如果包装对象里面元素是多个时候,做设置操作会影响包装对象中的所有dom对象。

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

    全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

    通过选择器定位获取的dom对象,此时会转变为 jQuery对象 9.1 基本选择器 id选择器:通过dom对象的id定位dom对象,通过id找对象,id在当前页面中是唯一的。...$("#id,.class,标签名") jQuery基础知识总结 10.表单选择器 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单,均可做出相应选择。...在定位了dom对象之后,根据一些条件筛选dom对象。 过滤器也是一个字符串,用来筛选dom对象。 过滤器不能单独使用,必须和选择器一起使用。...注意:在代码中的写的等标签不会在页面中显示,而是会在页面中执行,但是获取的文本内容中含有这个 $(选择器).html():无参数调用方法,获取 DOM 数组第一个dom对象的在网页上显示的文本内容。...的数据,包含请求方式、数据、回调方法等 下边介绍的是 $.ajax() 函数中参数 async : 布尔值,表示请求是否异步处理。

    8K10

    jquery 下拉框搜索模糊查询

    jQuery下拉框搜索模糊查询实现在web开发中,经常会遇到需要在下拉框中进行搜索并进行模糊查询的需求。jQuery是一个广泛应用于前端开发的JavaScript库,可以帮助我们实现这样的功能。...>jQuery实现搜索功能接下来,使用jQuery编写代码实现下拉框的搜索功能。我们可以监听输入框的输入事件,然后根据输入的内容来筛选下拉框中的选项,从而实现模糊查询。...).hide(); // 隐藏不匹配的选项 } }); });});在这个示例中,用户可以在输入框中输入水果的关键词,下拉框会根据输入的内容进行模糊查询...当你在输入框中输入关键词时,下拉框的选项会实时根据输入内容进行筛选。 希望这个示例对你有帮助,如果有任何问题或需要进一步的解释,请随时询问!...跨浏览器兼容:jQuery封装了一些常见的浏览器兼容性问题,帮助开发者避免繁琐的兼容性处理。核心概念选择器:jQuery的选择器允许开发者通过CSS选择器选择元素,并对其进行操作。

    2.9K10

    jquery常用方法

    ").map(callback);//将一组元素转换成其他数组 $("#ID").find(expr);//搜索所有与指定表达式匹配的元素 $("#ID").children();//获得匹配元素集合中每个元素的所有子元素...//将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 $("#ID").not();//从匹配元素集合中删除元素 $("#ID").add();//将元素添加到匹配元素的集合中 $("#ID")....10 11 12 元素节点操作 $("#ID").wrap(html);//把所有匹配的元素用其他元素的结构化标记包裹起来 $("#ID").empty();//删除匹配的元素集合中所有的子节点 1...jQuery.ajax();//返回其创建的XMLHttpRequest对象。只有一个参数,参数是key/value 对象,包含各配置及回调函数信息。...遍历对象和数组 jQuery.map();//修改数据 jQuery.grep();//数据筛选,返回一个经过筛选后的数组 jQuery.inArray(value,array);//查找元素的下标 jQuery.merge

    1.3K20

    jQuery的基本操作

    jQuery就是一个js的库· 主要分为两部分:            1·寻找元素         (选择器,筛选器)            2·操作元素          (CSS的操作,属性的操作...,文本的处理) 选择器 基本  #id    #id //用于搜索的,通过元素的id属性中给定的值 描述:(查找ID为myDiv的元素) HTML代码: id="...id="myDiv">id="myDiv"]  element  element //一个用于搜索的元素·指向DOM节点的标签名 描述:查找一个DIV元素· 实列...类名 2·用于决定元素是否包含class的布尔值 switch 用于决定元素是否包含class的布尔值· function(index,class,wsitch)[,switch] 1·用来返回在匹配的元素集合中的每一个元素上用来切换的样式类名的一个函数...(index,text) 此函数返回一个字符串·接受两个参数,index为元素在集合中的索引位置,text为原先的text值· 无参数描述 设置所有p元素的文本内容 jQuery代码 $("p

    8.8K20

    jquery jQuery快速入门

    // DOM对象使用DOM的方法 jQuery基础语法 $(selector).action() 查找标签 基本选择器 id选择器: $("#id") 标签选择器: $("tagName") class...儿子和兄弟元素: $("#id").children();// 儿子们 $("#id").siblings();// 兄弟们 查找 搜索所有与指定表达式匹配的元素。...removeProp() // 移除属性 注意: 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。....each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。

    19.5K51

    jQuery基础图文系列

    用于选取首字母 ::before 在被选元素的内容前面插入内容 ::after 在被选元素的内容后面插入内容 ::selection 应用于文档中被用户高亮的部分 jQuery中的基本选择器:id选择器...位置筛选器,子元素筛选器,表单筛选器,内容筛选器,自定义筛选器,其他筛选器。...jQuery选择器匹配的元素 .add() 将元素添加到匹配元素的集合中 .addSelf() 把堆栈中之前的元素添加到当前集合中 .children() 获取匹配元素集合中每个元素的所有子元素 .closest....prev() 获得匹配元素集合中每个元素的前一个同辈元素 .prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素 .prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止...append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容 appendTo() 向目标结尾插入匹配元素集合中的每个元素 attr() 设置或返回匹配元素的属性和值 before() 在每个匹配的元素之前插入内容

    5.3K10

    jQuery 常用方法

    Ajax 交互 选择器 符号$表示 jQuery 对象,$函数通常也被称为 jQuery 的工厂函数,jQuery 的操作基本上都以$( )开始,所有选择器都放在这个括号中,例如$("#title")将返回一个...jQuery 选择的 HTML 元素,在返回 jQuery 对象之后,就可以调用由 jQuery 提供的丰富的 API 来完成相应的操作了 基本选择器,通过元素标签名,元素 ID,Class 来查找...选取 ID 为 item 的元素后面的所有 兄弟元素 过滤选择器,主要是通过特定的过滤规则来筛选出所需的 DOM 元素,过滤规则与 CSS 中的伪类选择器语法相同,即选择器都以一个冒号:开头...(); 切换这个 cls 类 .toggleClass(‘cls’); 筛选元素 .filter(); 向每个匹配元素追加内容 .append(); 把所有匹配元素追加到另一个指定的元素元素集合中 .appendTo...").prependTo("p"); 再次元素之后添加元素 .after(); 将此元素添加到(参数)的后面 .insertAfter(); 在每个匹配的元素之前添加元素 .before();

    3.4K50

    jQuery基础系列

    用于选取首字母 ::before 在被选元素的内容前面插入内容 ::after 在被选元素的内容后面插入内容 ::selection 应用于文档中被用户高亮的部分 jQuery中的基本选择器:id选择器...位置筛选器,子元素筛选器,表单筛选器,内容筛选器,自定义筛选器,其他筛选器。...jQuery选择器匹配的元素 .add() 将元素添加到匹配元素的集合中 .addSelf() 把堆栈中之前的元素添加到当前集合中 .children() 获取匹配元素集合中每个元素的所有子元素 .closest....prev() 获得匹配元素集合中每个元素的前一个同辈元素 .prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素 .prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止...append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容 appendTo() 向目标结尾插入匹配元素集合中的每个元素 attr() 设置或返回匹配元素的属性和值 before() 在每个匹配的元素之前插入内容

    3.4K20

    Python全栈之jQuery笔记

    用jQuery选择器选择一个对象,会有多种不同的方法可供选择. 1.基本选择器(跟CSS选择器用法一模一样): 名称 用法(示例) 描述 ID选择器...筛选选择器(方法): 筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法....它们返回的是前面的同胞元素(在DOM树中沿着同胞之前元素遍历,而不是之后元素遍历). 4.jQuery遍历-过滤 缩小搜索元素的范围: 三个最基本的过滤方法是:first(),last()和eq()....); 参数: clearQueue:是否清除队列; jumpToEnd:是否跳转到最终效果....end(); 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态. 3.2 each方法 jQuery的隐匿迭代会对所有的DOM对象设置相同的值,

    6.7K40

    jQuery 快速入门教程

    在jQuery库中实际上定义了一个jQuery()方法,它是jQuery库的核心。我们调用该方法并传入指定的参数,就可以返回一个jQuery实例对象,该对象中包含匹配的一个或多个DOM元素。..."并且具备id属性的元素 此外,为了更加便于使用,jQuery还定制了特有的选择器: // jQuery特有的选择器,当然也可以和其他选择器任意组合使用 $(":checkbox"); // 选取所有的...$("#uid").next(); // 选取id为uid的元素之后紧邻的同辈元素 jQuery的筛选方法比较多,甚至允许你自定义函数来筛选,请参考jQuery的文档筛选方法一览表。...与此不同的是,jQuery在匹配不到对应元素时将返回一个空的jQuery对象,我们仍然可以调用jQuery对象的方法,而且并不会报错。因为jQuery会智能地处理这种情况。...有些时候,我们也可能需要将jQuery对象转换DOM元素。 在此之前,我们应该先了解jQuery对象所包含的DOM元素是存储在什么属性中的。 实际上jQuery对象是一个类数组对象。

    15.2K30

    jQuery选择器Sizzle原理分析(下)

    进入到编译过程 这里面需要讲解下为何要进行筛选的工作,前面也说过,目的就是为了尽量缩小查询范围,首先缩小上下文范围,然后缩小种子集合范围,因为从右向左查询的过程更快,所以我们是从后面开始搜索种子集合,搜索到之后...PSEUDO:其他伪类选择符 这几种类型,那Expr.filter里面包含的分别是各种类型的过滤函数,比如Expr.filter["ID"] 这个函数的作用就是通过参数ID返回新的函数FUNC_ID...,这个函数参数传入一个DOM元素(其实就是之前的seed集合),判断这个DOM元素的ID是否是指定ID,也就是判断seed集合是否是选择符指定的ID元素。...为此我们可以得出几个优化选择器的结论: 1. 尽量在选择器以ID来查询,或者至少开头是以ID来查询:这样可以快速缩小查询的根节点。 2....在选择器最后尽量指定seed元素(千万不能用*):因为Sizzle会从最后的选择符开始寻找符合条件的seed集合 4. 尽量使用父子查询来代替后代查询:后代查询需要循环查找,父子查询范围小很多。

    1K20

    jQuery入门前言

    6、基本筛选选择器: 筛选选择器的用法与CSS中的伪元素相似,选择器用冒号“:”开头,通过一个列表,看看基本筛选器的描述: ?...image.png 12、表单对象属性筛选选择器: 除了表单元素选择器外,表单对象属性筛选选择器也是专门针对表单元素的选择器,可以附加在其他选择器的后面,主要功能是对所选择的表单元素进行筛选。...4、.css(): 在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了。...test1元素集合中的每个元素前面插入p元素 $(".test1").before('before,在匹配元素之前增加',...'多参数') //在匹配test1元素集合中的每个元素后面插入p元素 $(".test2").after('<p style

    3.4K30

    jQuery

    jQuery内容: 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax     下载链接:jQuery官网,首先需要下载这个jQuery的文件,然后在...属性作为一会筛选的时候的区分:   上一个元素: $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")   父亲元素: $("#id...儿子和兄弟元素: $("#id").children();// 儿子们 $("#id").siblings();// 兄弟们,不包含自己,.siblings('#id'),可以在添加选择器进行进一步筛选...在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。....each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。

    10.3K20

    JavaWeb18-jquery学习笔记(Java全栈开发)

    jquery一.筛选 筛选与之前的选择器雷同,筛选提供的都是函数. 1....:判断元素是否含有特定的样式 filter(...):筛选出与指定表达式匹配的元素集合 is(...):判断元素是否符合指定的选择器 has(...):含有特定后代的元素 not(...)....show(); }); is('selecter'): 是否匹配选择器表达式 // 的div 下一个兄弟是否是span" id...: 1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找; 2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤...请求方式 格式1: $.ajax(url,[settings]) 格式2:setting可以使用json格式 jQuery.ajax(settings) 参数: async 设置是否异步,true:表示异步

    7.7K90
    领券