首页 > web前端 > js教程 > 正文

jquery中的css方法和事件方法用法详解

伊谢尔伦
发布: 2017-06-19 14:46:00
原创
1513人浏览过

CSS方法

.hasclass(calssname) 检查元素是否包含某个class,返回true/false

$( "#mydiv" ).hasClass( "foo" )
登录后复制

.addClass(className) / .addClass(function(index,currentClass)) 为元素添加class,不是覆盖原class,是追加,也不会检查重复

$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {  return "item-" + index;
});
登录后复制

removeClass([className]) / ,removeClass(function(index,class)) 移除元素单个/多个/所有class

$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {  return $( this ).prev().attr( "class" );
});
登录后复制

.toggleClass(className) /.toggleClass(className,switch) /  .toggleClass([switch]) / .toggleClass( function(index, class, switch) [, switch ] ) toggle是切换的意思,方法用于切换,switch是个bool类型值,这个看例子就明白

<div class="tumble">Some text.</div>
登录后复制

第一次执行

立即学习前端免费学习笔记(深入)”;

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
登录后复制

第二次执行

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>
登录后复制
$( "#foo" ).toggleClass( className, addOrRemove );// 两种写法意思一样if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}
登录后复制
$( "div.foo" ).toggleClass(function() {  if ( $( this ).parent().is( ".bar" ) ) {    return "happy";
  } else {    return "sad";
  }
});
登录后复制

.css(propertyName) / .css(propertyNames) 获取元素style特定property的值

var color = $( this ).css( "background-color" ); 
var styleProps = $( this ).css([    "width", "height", "color", "background-color"
  ]);
登录后复制

.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson ) 设置元素style特定property的值

$( "div.example" ).css( "width", function( index ) {  return index * 50;
});
$( this ).css( "width", "+=200" );
$( this ).css( "background-color", "yellow" );
   $( this ).css({      "background-color": "yellow",      "font-weight": "bolder"
    });
登录后复制

 

电子手机配件网站源码1.0
电子手机配件网站源码1.0

电子手机配件网站源码是一个响应式的织梦网站模板,软件兼容主流浏览器,且可以在PC端和手机端中进行浏览。模板包含安装说明,并包含测试数据。本模板基于DEDECms 5.7 UTF-8设计,需要GBK版本的请自己转换。模板安装方法:1、下载最新的织梦dedecms5.7 UTF-8版本。2、解压下载的织梦安装包,得到docs和uploads两个文件夹,请将uploads里面的所有文件和文件夹上传到你的

电子手机配件网站源码1.0 0
查看详情 电子手机配件网站源码1.0

事件方法

.bind( eventType [, eventData ], handler(eventObject) ) 绑定事件处理程序,这个经常用,不多解释

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});
登录后复制

.delegate( selector, eventType, handler(eventObject) ) 这个看官方解释吧

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

$( "table" ).on( "click", "td", function() {//这样把td的click事件处理程序绑在table上
  $( this ).toggleClass( "chosen" );
});
登录后复制

.on( events [, selector ] [, data ], handler(eventObject) ) 1.7后推荐使用,取代bind、live、delegate

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});
登录后复制

.trigger( eventType [, extraParameters ] ) JavaScript出发元素绑定事件

$( "#foo" ).trigger( "click" );
登录后复制

.toggle( [duration ] [, complete ] ) / .toggle( options ) 隐藏或显示元素

$( ".target" ).toggle();
$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {    // Animation complete.  });
});
登录后复制

以上就是jquery中的css方法和事件方法用法详解的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号