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

JavaScript类库---JQuery(一)

1、基础: Jquery类库定义了一个全局函数:JQuery(); 别名$.是JQuery在全局命名空间中定义的唯一两个变量。...返回一个新创建的JQuery对象; 另:JQuery中定义的许多方法返回值都是JQuery对象(方法的调用者);JQuery中函数:.each() JQuery中方法:**.each()没有符号; JQuery...方法的4种不同调用方式: 参数是字符串表示的CSS选择器:$('.class')返回当前文档中匹配到的元素集。...: JQuery使用同一个方法来获取和设置属性,区别是参数的不同,类似于重载;   setter(设置)时返回的是JQuery对象;getter(获取)时返回单个值(元素);所以链式调用不能使用getter...$('div').data("x",1); 获取$('div').data('x'); 3、文档操作: 4、JQuery中的处理事件:   1.事件简单注册:$("p").click(function

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

    视频网站弹幕开发

    LOL中,英雄并不重要,重要的是使用英雄的人) jQuery类库 html css 用到的jQuery方法: toggle([speed],[easing],[fn])   用于绑定两个或多个事件处理器函数...如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。   在 jQuery 1.2 中,你可以使用 em 和 % 单位。...另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。...:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing". fn:在动画完成时执行的函数,每个元素执行一次。...append(content|fn)   向每个匹配的元素内部追加内容。   这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

    1.1K10

    jQuery源码解析之$().animate()(下)

    方法,就是new一个对象,就是执行jQuery.Tween.init()方法,根据{width:500}生成的动画对象如下: { easing: "swing" elem: div#A end...()的最终作用就是将$().animate()中的参数转化为动画对象,并push进animation.tweens数组中 (6)jQuery.fx.timer() 作用: 依次执行timer 源码:...: //源码8431行 jQuery.timers = []; (7)jQuery.fx.start() 作用: 在动画运行前,加锁,并运行动画 源码: //源码8514行 //加锁,运行动画...后,记录下剩下的的时间在总时间(duration)中的位置 remaining = Math.max( 0, animation.startTime + animation.duration...duration、动画开始时间animation.startTime和每次调用requestAnimationFrame后动画结束时间currentTime,计算出此帧在整个动画流程中的占比,从而较为准确绘制动画

    2.1K10

    JQuery基础

    使用大公司CDN好处: 许多用户在访问其它站点时,已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点时,会从缓存中加载jQuery,这样可以有效减少加载时间!...大多数CDN都可以确保用户请求文件时,会就近服务器进行响应,从而提高加载速率。 第二部分:jQuery语法: 1.jQuery语法是通过选取HTML元素,然后对选取的元素进行某些操作。...属性设置无效,因为色彩动画不包括在核心jQuery库中。...插入后:hello tomorrow是使用append():插入到div里面了,并与div里面的元素内容相联合;而hello yesterday是使用after():插入待div外面,即div元素的后面...3.jQuery 删除元素: remove():删除被选元素及子元素。ps:remove()可接受一个参数,对被删元素进行过滤。参数是jQuery选择器的语法。

    6.8K51

    jQuery 快速入门教程

    // 你同样可以使用jQuery对象的方法对这些临时的DOM元素进行操作,或者将它们插入到文档的指定位置。...与此不同的是,jQuery在匹配不到对应元素时将返回一个空的jQuery对象,我们仍然可以调用jQuery对象的方法,而且并不会报错。因为jQuery会智能地处理这种情况。...属性操作 在jQuery中,对DOM元素进行属性操作,主要是通过以下方法实现的: // selector 表示具体的选择器 $("selector").val(); // 获取第一个匹配元素的value...jQuery核心:Ajax jQuery还对Ajax进行了封装了,我们可以非常方便地发送一个Ajax请求,并对响应进行处理。...jQuery辅助工具方法 jQuery还为我们提供了许多的辅助工具方法,以便于我们进行各种常用的代码逻辑处理。

    15.2K30

    Python全栈之jQuery笔记

    $("div").find("*"); 返回 div> 的所有后代 3.jQuery遍历-同胞(siblings) 同胞拥有相同的父元素.通过jQuery,您能够在DOM树中遍历元素的同胞元素...对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法....jQuery在进行值获取时,只会返回第一个元素对应的值. 1.3 操作样式类名(jQuery获取并设置 CSS 类): $("#div1").addClass("divClass2") //为...事件冒泡的作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件....nodjs在处理高并发方面性能卓越,目前许多公司都在使用nodejs作为后端数据服务和前端开发的中间层.

    6.7K40

    jquery第一次课的案例教程

    为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦。 遍历数组很麻烦,通常要嵌套一大堆的for循环。 有兼容性问题。...当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中, 等前面的动画完成后再开始执行。...可是用户的操作往往都比动画快, 如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积, 影响到效果。...$(selector).position(); jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。...【案例:五角星评分案例.html】 each方法 jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。

    90210

    为什么要学jquery

    为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦。 遍历数组很麻烦,通常要嵌套一大堆的for循环。 有兼容性问题。...当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中, 等前面的动画完成后再开始执行。...可是用户的操作往往都比动画快, 如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积, 影响到效果。...$(selector).position(); jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。...【案例:五角星评分案例.html】 each方法 jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。

    1.6K10

    继续死磕前端

    (){ // 内部的 this 指的是原生对象 ... // 使用 jquery 对象用 $(this) }; js 对象与 jquery 对象有些许不同,jquery 对象是对 js 对象的封装...//方式2 获取元素的索引值可以使用 index() 方法 1.3 jquery 动画 通过 animate 方法可以设置元素某属性值上的动画,动画执行完后会执行一个函数。...当我们验证邮箱格式、手机号、身份证号时必不可少,那么 jquery 中如何使用呢?...答:事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。...面向对象编程深入人心,有着 python 、java 的基础,大家应该不难理解。接下来说一下 js 中如何创建一个对象,并对其进行操作。

    3.7K10

    jQuery的animate函数

    注:要实现颜色的动画效果,必须使用 jQuery.Color() 插件。除非特殊声明,否则这些属性的单位都按照像素处理,可以使用的其他单位还包括 em 和 % 百分比。...如果使用“+=”、“-=”这样的字符串,则会使用给定的步长进行属性值的计算。 Duration 持续时间 Duration 的单位为微秒,数值越高动画效果越慢,反之则越快。...Step Function 步长函数 在animate的第二种调用方式中提供了一个step的选项,这是一个回调函数,可以在每一个step执行时被触发。...这个函数在自定义动画类型时非常有用,可以在动画触发后对其做出更改。step函数接收 now 和 fx 两个参数,this 设置为发生动画的DOM元素。...Easing 放开动作 这个属性是一个字符串,来指定动画过程中不同的时间点所使用的速度,默认的属性为“swing”,如果需要动画保持一个均匀的速度,可以使用“linear”。

    2.5K30

    jQuery选择器、Dom操作、样式、事件处理

    jQuery将JavaScript的代码进行了封装,处理了兼容性问题,提供API进行调用, 让我们实现功能时不用再为兼容性而困扰,少写了许多代码。...jQuery对象:将DOM原生对象进行封装后得到的类数组对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。...var domObj = document.getElementById('id'); //DOM对象 var obj=('#id'); //jQuery对象; 注意:在jQuery对象中无法使用DOM...(this); console.log(e); }); 3.可以在绑定的时候给事件处理程序传递一些参数 $('div').on('click', {name: 'Byron', age: 24}...normal,可能的值:数字(毫秒,比如5000)、'slow'、'normal','fast' easing: 可选,规定在不同的动画点中设置动画速度的 easing 函数。

    2.7K30

    第73天:jQuery基本动画总结

    在参数对应的时间内,元素会发生显示/隐藏的改变,在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。...2种语法使用,几乎差不多了,唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制。...中动画animate(下) animate在执行动画中,如果需要观察动画的一些执行情况,或者在动画进行中的某一时刻进行一些其他处理,我们可以通过animate提供的第二种设置语法,传递一个对象参数,可以拿到动画执行状态一些通知...div>'); } }); 14、jQuery中停止动画stop 动画在执行过程中是允许被暂停的,当一个元素调用.stop()方法,当前正在运行的动画(如果有的话)立即停止 语法: ....each处理这个div的合集,给每个div都设置style属性 $('div').css(...)

    4.6K10

    JQuery

    jquery选择器 jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。...') //选择id为为ul1元素下的所有li下的span元素 $('input[name=first]') // 选择name属性等于first的input元素 对选择集进行过滤 $('div').has...submit() 提交表单 表单验证 规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡 作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上...,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。.../根标签 追加节点:同级追加和自己追加(前面 后面) 步骤: 声明变量保存的节点数据 使用追加函数追加节点 子级追加: append()和appendTo():在现存元素的内部,从后面放入元素 prepend

    1.9K21

    jquery学习

    它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments...jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 二 什么是jQuery对象?...//虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错 //约定:如果获取的是 jQuery...//对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。...,fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

    3.1K40
    领券