1.操作样式

    1.1 css的操作
     
功能:设置或者修改样式,操作的是style属性

操作单个样式

// name:需要设置的样式名称
// value:对应的样式值
// $obj.css(name, value);
// 使用案例
$('#one').css('background','gray');// 将背景色修改为灰色

      设置多个样式

// 参数是一个对象,对象中包含了需要设置的样式名和样式值
// $obj.css(obj);
// 使用案例
$('#one').css({
'background':'gray',
'width':'400px',
'height':'200px'
});

获取样式

// name:需要获取的样式名称
// $obj.css(name);
// 案例
$('div').css('background-color');

 注意:获取样式操作只会返回第一个元素对应的样式值

       1.2width方法与height方法     

设置或者获取高度,不包括内边距、边框和外边距  width() height() 不传参数表示获取,传递参数表示设置。(传递参数时,可以不用带单位px)

// 带参数表示设置高度
$('img').height(200);
// 不带参数获取高度
$('img').height();

获取网页的可视区宽高   

// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();

   1.3  innerWidth/innerHeight/outerWidth/outerHeight

innerWidth()/innerHeight()    方法返回元素的宽度/高度(包括内边距)。
outerWidth()/outerHeight() 方法返回元素的宽度/高度(包括内边距和边框)。
outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度(包括内边距、边框和外边距)。

   1.4scrollTop与scrollLeft

         设置或者获取垂直滚动条的位置

// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(window).scrollLeft();

2.事件机制

   2.1on注册事件

         on注册简单事件:

// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
$(selector).on( 'click', function() {});

   on注册事件委托:

// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on( 'click','span', function() {});

on注册事件的语法:

// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将由自己执行。
// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
$(selector).on(events[,selector][,data],handler);

2.2事件解绑:

            off方式:

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off('click');

  2.3触发事件:

$(selector).click(); // 触发 click事件
$(selector).trigger('click');

2.4部分jQuery事件对象

            jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。

// screenX和screenY    对应屏幕最左上角的值
// clientX和clientY 距离页面左上角的位置(忽视滚动条)
// pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离) // event.keyCode 按下的键盘代码
// event.data 存储绑定事件时传递的附加数据 // event.stopPropagation() 阻止事件冒泡行为
// event.preventDefault() 阻止浏览器默认行为
// return false:既能阻止事件冒泡,又能阻止浏览器默认行为。

    

JQuery操作样式以及JQuery事件机制的更多相关文章

  1. 测开之路一百零四:jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...

  2. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  3. jQuery操作标签,jQuery事件操作,jQuery动画效果,前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  4. Jquery操作样式

    1.CSS(name,value) 修改单个样式 $(function(){ $(".divcontent").css("background","r ...

  5. jQuery操作样式知识总结

    css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使用案例 $(&qu ...

  6. jquery操作select标签change事件

    $('#update_supply_id').on('change',function(){//判断是否选取prompt属性,无返回值: if($(this).val()){ var selectTe ...

  7. 【jquery操作cookie】JQuery中$.cookie()方法的使用(同名cookie会覆盖)

    jquery.cookie.js插件: <script type="text/javascript" src="js/jquery-1.6.2.min.js&quo ...

  8. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  9. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

随机推荐

  1. 网络编程懒人入门(十):一泡尿的时间,快速读懂QUIC协议

    1.TCP协议到底怎么了? 现时的互联网应用中,Web平台(准确地说是基于HTTP及其延伸协议的客户端/服务器应用)的数据传输都基于 TCP 协议. 但TCP 协议在创建连接之前需要进行三次握手(如下 ...

  2. Gluserfs 架构详解【译】官网

    Gluserfs详解 排版看着不舒服的,可以查看[我的简书](https://www.jianshu.com/p/0340e429431b) doc home:https://docs.gluster ...

  3. 这十个Python常用库,学习Python的你必须要知道!

    想知道Python取得如此巨大成功的原因吗?只要看看Python提供的大量库就知道了 包括原生库和第三方库.不过,有这么多Python库,有些库得不到应有的关注也就不足为奇了.此外,只在一个领域里的工 ...

  4. mysql登陆时出现ERROR 2013 (HY000): Lost connection to MySQL server at 'reading initial communication packet', system error: 0

    有4到5天没开mysql,这天晚上打=打开phpstudy,想进去mysql练习练习,结果丢给我这个 ERROR 2013 (HY000): Lost connection to MySQL serv ...

  5. swift多线程定时器

    swift多线程定时器的使用 func countDown(_ timeOut:Int,view: UIView){ var timeout = timeOut let queue:DispatchQ ...

  6. 成功安装SQL Server实例后 无法找到SQL Server Configuration Manager工具的解决方案

    有一次成功安装SQL Server实例后 ,但是在所有程序中无法找到SQL Server Configuration Manager工具,以下步骤是我们当时的解决方案.最后成功将这个工具的转移到了桌面 ...

  7. python anaconda 常用操作;conda 命令指南

    在使用 python anaconda时,经常会用到很多常用操作,记录下来,方便以后更好地使用: conda: Conda既是一个包管理器又是一个环境管理器.你肯定知道包管理器,它可以帮你发现和查看包 ...

  8. node.js守护进程问题的解决

    最近自己写了一个node.js来读取redis数据,编写完成后按理来说加& 应该是有效的 nohup node redis.js & 但是每次关闭终端后这个进程就自动停止了,百度了下 ...

  9. X短期项目总结

    刚退出了一个项目,简称为X项目.这个项目中,还是遇到了不少问题,也解决了部分问题,还是挺有收获的,所以总结一下. 虽然标题说是短期项目总结,但其实这个项目并不短, 持续了约3年时间. 所谓的短,只是我 ...

  10. go语言设计模式之bridge

    著名的桥接模式罗.. bridge.go package bridge import ( "errors" "fmt" "io" ) typ ...