首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery的属性操作及事件

(不会更改DOM结构),但是该属性是存在的,且可以获取输出②attr():在元素本身是可以看到设置的属性,也可以获取输出二、遍历操作1、区别(1)隐式迭代:给同一类元素做同样的操作(2)遍历操作:给同一类元素做不同的事情...left:30}) console.log($('div').offset());(2)position():获取元素偏移【只能获取不能设置】返回被选元素带有定位的父级偏移坐标...scroll(function(){ console.log($('.box').scrollTop()); //返回:顶部滚动多少 })(4)带有动画的返回顶部...(jQuery 事件 | 菜鸟教程)1、单个事件注册element.事件(fuction(){})(1).hover:模仿鼠标悬停事件(2)参数        ①函数1:鼠标移上去触发什么事件        ...('仅一次');})5、自动触发事件$('button').click()五、插件jQuery插件库-收集最全最新最好的jQuery插件小伙伴可以在这个网站找喜欢的作品,下载压缩包后,可以直接看效果,而且都有源码的哦

1.7K70

【JavaWeb】86:jQuery的属性、文档、动画以及事件

如果不赋值,那么获取的就是对应标签的值。 ②设置标签的属性值 在js中,是给value属性赋值。 在jQuery中,是给函数val()传一个参数。 如果赋值,那么就是在修改对应标签的值。...②设置标签的内容 使用text设置的话,标签只有文本不带有链接。 使用HTML设置的话,标签可以带有链接。...三、动画和事件 1动画效果 动画效果很难用文章来展示出来,我也就不一一展示了,大致能有个了解也好; ? 方法hide()、show()和toggle(),能达到动画的效果。...方法slideDown()、slideUp()、slideToggle(),能达到动画滑动的效果。 此外网上还有开源的各种动画效果,查询jQuery插件即可。...第二个参数为鼠标移出去时触发的函数。 这样就能达到一个切换的效果。 以上就是对jQuery中动画和事件的说明,其它还有很多就不一一说明了。

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

    jQuery原理(原型上的属性、方法)

    jQuery原型上的属性 kjQuery.prototype = { constructor: kjQuery, init: function (selector) {}, /...: [].splice, }; 关于三个方法(push,sort,splice)以push为例: 通过[].push找到数组的push方法 但是对象的push方法由对象调用,那么this就指向了对象(jQuery...) 所以也就相当于[].push.apply(this)将元素添加到对象身上 jQuery原型上的方法 toArray 把实例转换为数组返回 toArray: function () { return...,是jQuery类型的实例对象 first: function () { return this.eq(0); }, last:获取实例中的最后一个元素,是jQuery类型的实例对象 last:...function () { return this.eq(-1); }, each 遍历实例,把遍历到的数据传给回调使用 jQuery存在两个each方法,一个类方法,一个对象方法。

    97120

    jQuery源码研究:jQuery原型对象上的属性方法(上)

    jQuery源码学习第二节。 今天看下简化框架的第二部分:line: (146 - 225) 为jQ对象添加一些方法和属性。...,jQuery对象作为构造函数,在其原型上定义了一些属性和方法,同时其原型也被指向jQuery对象的属性fn上面。...至于定义的方法,下面一个个来看。首先需要明确,这些方法都是jQuery实例对象的方法;其次对于js中call的作用要有深刻的理解,才不会看晕。...toArray方法:返回一个包含jQuery对象集合中的所有DOM元素的数组。这个方法不接收任何参数。所有匹配的DOM节点都会包含在一个标准的数组中。...这个方法其实作用就是把元素集合添加到一个新的对象中,并且这个对象还具有jQuery对象的引用,所以也就是具有jQuery对象的所有方法和属性,链式调用起来妥妥的呀。

    1.1K40

    事件对象的使用、属性和方法

    1 event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素 2 target属性可以是注册事件时的元素或者子元素,通常用于比较event.target...事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁 4 jQuery事件对象的作用 li都有一个共同的父元素,而且所有的事件都是一致的...,可以采用要一个技巧来处理,也是常说的"事件委托 5 event.type获取事件的类型 6 event.pageX 和 event.pageY获取鼠标当前相对于页面的坐标,通过这2个属性,可以确定元素在当前页面的坐标值...this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素 13 .this和event.target都是dom对象,使用jquey中的方法可以将他们转换为...jquery对象,比如this和$(this)的使用、event.target和$(event.target)的使用 转帖:http://blog.51cto.com/lakaodekaola/2085868

    1.5K30

    「jQuery」基础 - 02

    1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性...因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。 把全选按钮状态赋值给3小复选框就可以了。 当我们每次点击小的复选框按钮,就来判断。...用表单change事件 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计 核心JS函数: function getSumMoney() { var sumMoney = 0;...语法1 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...获取距离带有定位父级位置(偏移) position 如果没有带有定位的父级,则以文档为准 // 这个方法只能获取不能设置偏移 console.log(

    2.9K20

    XHR的属性和方法及事件汇总

    XHR的属性和方法及事件汇总 xhr.open xhr.send() xhr.onreadystatechange = function() { } 监听状态变化 xhr.reaadyState...’) 获取服务器时间是标准的日期格式对象(GMT格林尼治时间) xhr.getAllResponseHeaders 获得到响应头的所有信息 获取响应主体信息 xhr.response 不限定类型...xhr.responseType 获取响应回来的类型 xhr.responText 限定类型 一般用 responseText,因为服务器返回的信息一般都是JSON格式的字符串 xhr.responseXML...xhr.setRequestHeader() 设置请求头信息 注意:设置的请求头的值不可以是中文和其它符号,但是我们可以使用 encodeURI / encodeURIComponent 进行编码...,xhr.setRequestHeader(‘BOX’,encodeURIComponent(‘哈喽’)),其设置应该在send() 之前 这些信息都是浏览器给我们默认设置的

    32710

    html复选框选中与未选中触发事件的方法

    今天,当制作一个不需要from表单的复选框来提交数据的小函数时,需要在复选框被选中或未选中的情况下修改一些后台数据。我想到了用js代码来监控复选框的状态,并将实时数据发送到后台。...关于js代码如何监控checkbox的状态,可以参考下面的例子。 复选框选择和取消选择触发事件的方法。 Jq代码_ _点击复选框触发事件我是复选框。 $('#isbox ')。...; } }); 本机JS代码_ _单击复选框触发事件。 例如:我是复选框。...功能检查(e) 如果(已检查){ console . log(“checked”); }否则{ Console.log('未选中'); } } 例如:我是复选框。...=function(){ if(this.checked){ console . log(“checked”); }否则{ Console.log('未选中'); } }; PS:上面两个原生JS检测复选框选中状态的代码原理是一样的

    5K40

    前端成神之路-02_jQuery

    2.因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。 3.把全选按钮状态赋值给3小复选框就可以了。...用表单change事件 8.用最新的表单内的值 乘以 单价即可 但是还是当前商品小计 ​ 代码实现略。...注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...创建、添加、删除 ​ jQuery方法操作元素的创建、添加、删除方法很多,则重点使用部分,如下: 语法总和 ? ​ 注意:以上只是元素的创建、添加、删除方法的常用方法,其他方法请参详API。...获取距离带有定位父级位置(偏移) position 如果没有带有定位的父级,则以文档为准 // 这个方法只能获取不能设置偏移 console.log(

    2.3K10

    jq---方法总结

    $(".test"); // 选择所有带有CSS类名"test"的元素 $("[name=books]"); // 选择所有name属性为"books"的元素 :针对input元素 // jQuery...checked属性值 $("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框) $("selector...() //双击事件 focus()、聚焦的时候事件 change()、输入域改变的时候 hover()、移入的时候 submit()(仅限于表单元素) 、mousedown()、鼠标按下的事件....trigger("click"); // 触发所有匹配元素上的change事件 $("selector").trigger("change"); // 触发所有匹配元素上绑定在foo命名空间下的mouseout...事件的处理函数 $("selector").trigger("mouseout.foo"); :移除事件 //主要用于解除通过click()、dblclick()等直接事件方法以及bind()、one(

    3K20

    jquery回车监听事件及html自定义属性的应用

    搜索功能举例 jquery回车监听事件在最后那行代码 define('widget/search.js', [], function (require, exports, module) {...').on('click', function (e) { search(); }); } }; //回车监听事件...function (event) { if (event.keyCode == 13) { search(); } }); }); HTML自定义属性的应用...考虑到搜索功能是网站的公共功能,可以从多个页面跳转到搜索页,故做如下优化: html自定义属性,区分是从哪个页面跳转到搜索 在public.js中初始化搜索(public.js会被所有页面引入) js...根据type(页面来源)和keyword(关键字)进行搜索 html代码 data-act的作用: public.js据此判断是搜索功能还是其他功能 data-role的作用: search.js 据此判断搜索的类型

    93030

    jQuery 查找on事件绑定元素的被绑定元素方法

    jQuery 查找on事件绑定元素的被绑定元素方法 遇到的问题 今天写了一个JQ插件,结果里面有一点问题.让我很郁闷.问题演示代码如下 $box.on('click', 'img', function(...){ $(this) }); 如上代码,当我点击这个图片的时候 $(this) 是指 img ....当然这是正确的. 而我需要找到 $box 也就是 img 的父级. 如果不是插件的话,我当然可以根据它的ID或者CLASS来进行查询.问题是,我是写的插件,也就是说,我并不知道它的这些信息是什么....解决方法 很多基础的东西不理解,就会出现我这样的问题.如同事所说,你是还不会爬呢,都学上跑了.因此,踩坑无数啊....解决方法如下: $box.on('click', 'img', function(){ $box.has($(this)) }); 如上,通过 .has 操作,就能找到唯一的父级被绑定元素了.

    4.5K10

    jQuery

    鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus...scroll mouseleave hover blur unload 获得内容 - text()、html() 以及 val() 三个用于 DOM 操作的 jQuery 方法: text() -...jQuery 尺寸方法 width() height() innerWidth() - 宽度(包括内边距) innerHeight() - 高度(包括内边距) outerWidth() - 宽度(包括内边距和边框...) outerHeight() - 高度(包括内边距和边框) 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() - 返回被选元素的直接父元素。...()  - 选取匹配的元素,返回带有类名 "url" 的所有 元素:$("p").filter(".url"); not()  - 选取不匹配的元素

    4.7K10

    jQuery 属性操作

    1.jQuery 属性操作 ​ jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1 元素固有属性值 prop() ​ 所谓元素固有属性就是元素本身自带的属性,...(该方法也可以获取 H5 自定义属性) 1.3 数据缓存 data() ​ data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。...2.因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。 3.把全选按钮状态赋值给3小复选框就可以了。...全选 全不选功能模块 // 就是把全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了 // 事件可以使用change $(".checkall").change...$(".j-checkbox").change(function () { // if(被选中的小的复选框的个数 === 3) { // 就要选中全选按钮 // } else

    1.8K20

    【前端】Web前端学习笔记【1】

    但是,仍然无法匹配'010 - 12345',因为带有空格。所以我们需要更复杂的匹配方式。...用代码触发事件(以change事件为例) 有些时候,我们希望用代码触发change事件,可以直接调用无参数的change()方法来触发该事件: var input = $('#test-input');...; input.change(); // 触发change事件 input.change()相当于input.trigger('change'),它是trigger()方法的简写。...其中: jQuery提供的辅助方法 $.extend(target, obj1, obj2, ...) , 它把多个object对象的属性合并到第一个target对象中,遇到同名属性,总是使用靠后的对象的值...IE事件处理程序 IE实现了与DOM类似的两个方法:attachEvent()和detachEvent()。 这两个方法接受相同的两个参数:事件处理程序名称与事件处理程序函数。

    40790

    jQuery 快速入门教程

    核心:DOM操作 属性操作 文档处理 CSS操作 动画效果 jQuery 核心:事件处理 jQuery 核心:Ajax jQuery 辅助工具方法 遍历方法 DOM元素和jQuery...属性值 $("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框) $("selector")....与click()方法类似,jQuery还提供绝大多数事件的绑定方法,例如:dblclick()、focus()、change()、hover()、submit()(仅限于表单元素)、mousedown...// 触发所有匹配元素上的click事件 $("selector").trigger("click"); // 触发所有匹配元素上的change事件 $("selector").trigger("change...,请参考jQuery的事件处理方法一览表 以及 jQuery Event对象的属性和方法。

    13.7K30
    领券