jQuery 的属性操作
        html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
        text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
        val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样

这三个方法,空参表示获取,带参表示修改或者设置。

通过获取多个JQuery对象,分别对他们得值进行修改

attr()                        可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled 等等
                                attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbj
prop()                     可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

DOM 的增删改:

内部插入:
appendTo()              a.appendTo(b) 把 a 插入到 b 子元素末尾,成为最后一个子元素

prependTo()              a.prependTo(b) 把 a 插到 b 所有子元素前面,成为第一个子元素外部插入

外部插入:
insertAfter()                a.insertAfter(b) 得到 ba
insertBefore()              a.insertBefore(b) 得到 ab
替换:
replaceWith()               a.replaceWith(b) 用 b 替换掉 a
replaceAll()                  a.replaceAll(b) 用 a 替换掉所有 b
删除:
remove()                     a.remove(); 删除 a 标签
empty()                       a.empty(); 清空 a 标签里的内容

一个小型案例:

CSS 样式操作:
             addClass() 添加样式
             removeClass() 删除样式
             toggleClass() 有就删除,没有就添加样式。
             offset() 获取和设置元素的坐标

jQuery 动画
基本动画:
        show() 将隐藏的元素显示                                         
        hide() 将可见的元素隐藏。
        toggle() 可见就隐藏,不可见就显示。
以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长,以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画
        fadeIn() 淡入(慢慢可见)
        fadeOut() 淡出(慢慢消失)
        fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明,1 完成可见,0.5 半透明
        fadeToggle() 淡入/淡出 切换

jQuery 事件操作
$( function(){} );    和   window.onload = function(){}  的区别?
他们分别是在什么时候触发?
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
2、原生 js 的页面加载完成之后,除了要等浏览器内核解析完标签创建好 DOM 对象,还要等标签显示时需要的内容加载

完成。他们触发的顺序?
1、jQuery 页面加载完成之后先执行
2、原生 js 的页面加载完成之后

他们执行的次数?
1、原生 js 的页面加载完成之后,只会执行最后一次的赋值函数。
2、jQuery 的页面加载完成之后是全部把注册的 function 函数,依次顺序全部执行。

jQuery 中其他的事件处理方法:
         click()                           它可以绑定单击事件,以及触发单击事件
         mouseover()                鼠标移入事件
         mouseout()                  鼠标移出事件
         bind()                           可以给元素一次性绑定一个或多个事件。
         one()                             使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
         unbind()                       跟 bind 方法相反的操作,解除事件的绑定
        live()                              也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面                                               动态创建出来的也有效

代码演示:

事件的冒泡
什么是事件的冒泡?
事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢?
在子元素事件函数体内,return false; 可以阻止事件的冒泡传递。

我们可以看到,我在div标签中嵌套了一个span标签,如果说我们在点击span内容得时候触发一个条件,那么会连着DIV这个标签得事件也会触发,那么我们只需要在span触发事件得代码中添加一个return false 即可

javaScript 事件对象
事件对象,是封装有触发的事件信息的一个 javascript 对象。
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
如何获取呢 javascript 事件对象呢?
在给元素绑定事件的时候,在事件的 function( event ) 参数列表中添加一个参数,这个参数名,我们习惯取名为 event。
这个 event 就是 javascript 传递参事件处理函数的事件对象。
比如:

JQuery常用属性操作,动画,事件绑定的更多相关文章

  1. jQuery之元素操作及事件绑定

    1.操作元素之属性: ①attr读:("selector").attr("属性名"):=>getAttribute("属性名"):改: ...

  2. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  3. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

  4. python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  5. jquery之属性操作

    jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...

  6. 前端 ----jQuery的属性操作

    04-jQuery的属性操作   jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...

  7. jQuery系列(四):jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  8. JQuery常用CSS操作

    JQuery常用CSS操作 $(elem).css(obj):设置行内样式 $(elem).position():返回相对于父容器位置,只能获取不能设置 $(elem).offset(obj):返回相 ...

  9. 19 01 16 jquery 的 属性操作 循环 jquery 事件 和事件的绑定 解绑

    jquery属性操作 1.html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').htm ...

随机推荐

  1. hdu 6048 Puzzle 拼图 逆序数

    关于拼图和逆序数的关系可以看看这个 http://www.guokr.com/question/579400/ 然后求逆序数在判断就行了 按题意生成原始排列,观察发现,每一轮数后方比该数小的数的数量( ...

  2. 【问答分享第一弹】MySQL锁总结:MySQL行锁、表锁、排他锁、共享锁的特点

    大家好,我是小于哥哈.前几天能分享了第一期面试题,MySQL 中有哪几种锁 和 这些锁各有哪些特点 ,这道面试题是经常会被问到的一个面试题,大家反馈的都挺不错的.今天特此来总结一下. 首发于公众号[终 ...

  3. AcWing 1140. 最短网络

    农夫约翰被选为他们镇的镇长! 他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场. 约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享给其他农场. 约翰的农场的编号是1,其他农场 ...

  4. TCP/UDP/HTTP的区别和联系(转载)

    一.TPC/IP协议是传输层协议,主要解决数据如何在网络中传输,而HTTP是应用层协议,主要解决如何包装数据. 关于TCP/IP和HTTP协议的关系,网络有一段比较容易理解的介绍:"我们在传 ...

  5. ESP-ADF相关学习笔记

    1.makefile:定义了一系列的规则来指定哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复杂的功能操作,因为 makefile就像一个Shell脚本一样,也可以执行操作 ...

  6. java基础---数组的查找算法(2)

    一.查找的基本概念 查找分为有序查找和无序查找,这里均以数组为对象,有序查找指的是数组元素有序排列,无序查找指的是数组元素有序或无序排列 平均查找长度(Average Search Length,AS ...

  7. C语言:读TXT 模拟键盘打字输出

    //#include<ctype.h> #include<stdio.h> #include <windows.h> //#include "string ...

  8. Hive——连接方式

    Hive--连接方式   一.CLI连接 直接通过CLI连接hive,进行相关hive sql 操作. 直接使用 hive-1.1.0-cdh5.7.0/bin/hive 命令即可 hive> ...

  9. Requests 方法 -- post请求操作实践

    1.登录Jenkins抓包 ,小编的Jenkins部署在Tomcat上,把Jenkins.war 包放置到webapps目录. 本次用浏览器自带抓包,按下F12操作,主要看post就可以,登录是向服务 ...

  10. 在Rancher中修改K8S服务参数的万金油法则

    作者简介 王海龙,Rancher中国社区技术经理,负责Rancher中国技术社区的维护和运营.拥有7年的云计算领域经验,经历了OpenStack到Kubernetes的技术变革,无论底层操作系统Lin ...