当前位置:  编程技术>jquery

JQuery操作DOM的笔记

    来源: 互联网  发布时间:2014-09-03

    本文导语:  JQuery操作DOM 操作元素的class属性(在DOM中叫做className属性) 有三个: 1. addClass()用来创建(添加)class属性 2. removeClass()用来移除一个class属性 3. toggleClass()用来交替添加/移除class属性 例子: $('#elementID').toggleClass('news-list'); ...

JQuery操作DOM
操作元素的class属性(在DOM中叫做className属性) 有三个:
1. addClass()用来创建(添加)class属性
2. removeClass()用来移除一个class属性
3. toggleClass()用来交替添加/移除class属性
例子:
$('#elementID').toggleClass('news-list');
首先检测该元素的class="news-list"就移除news-list不然就添加news-list。

现在不用Jquery中的具体操作DOM的方法就可以控制元素的class属性了

接下来看看 JQuery 是如何操作 其他的属性的呢?
JQuery中提供了两个方法:
1.attr() 用来添加/设置属性,可以同时设置多个属性包括class
2.removeAttr() 用来移除属性,可以同时设置多个属性包括class
类似.css()方法也可以同时设置多个css值:
例:***.css('width':100, 'height':100, 'borderLeftWidth':2);

$('#chapter a').attr('rel':'kko');//错误
$('#chapter a').attr({'rel':'kko'});//正确 注意 .attr({...});大括号不要丢了。

这样将这些a标签的rel属性统一设置成了kko,现在如果想为每一个a标签设置不一样的值怎么办呢?(比如id属性是不能重复的。)这里我们就需要用到each()方法了。
$('#chapter a').each(function(index){
     $(this).attr({
           'rel':'kko',
           'id':'kko-' + index
     });
});
each()方法是一个集合类的方法,获取到每一个元素each(function(index){});each()中匿名函数的index参数即为当前元素在这个集合类中的位置下表从0开始计数。


    
 
 

您可能感兴趣的文章:

  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jquery下拉select控件操作方法分享(jquery操作select)
  • Cookie操作插件 jQuery.Cookie
  • jquery链式操作、链式写法的小例子
  • 利用js(jquery)操作Cookie的方法说明
  • jQuery操作select option选项(增加 删除 修改)
  • jquery常用操作小结
  • jquery链式操作的正确使用方法
  • jQuery操作select下拉框的text值和value值的方法
  • JQuery 文本框操作的4个小例子
  • jquery加载完iframe的内容后才进行下一步操作的实现方法
  • jquery操作单选框radio的例子
  • 使用jquery实现IE下按backspace相当于返回操作
  • jquery cookie插件用法 jquery操作cookie的例子
  • 解决jquery操作checkbox火狐下第二次无法勾选问题
  • jquery操作checkbox示例分享
  • Jquery操作radio的小例子
  • jquery操作checkbox实现全选和取消全选
  • Jquery操作html标签及动态添加验证的例子
  • Jquery操作radio的简单实例
  • jQuery 操作下拉列表框的代码举例
  • jQuery学习笔记之jQuery原型属性和方法
  • jQuery学习笔记之jQuery.fn.init()的参数分析
  • jQuery学习笔记之toArray()
  • jQuery学习笔记之总体架构
  • jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
  • jquey笔记之dom对象与jquery对象互换的例子
  • JQuery EasyUI使用笔记分享
  • jQuery学习笔记之jQuery构建函数的7种方法
  • jquery学习笔记
  • jQuery学习笔记之 Ajax操作篇(三) - 过程处理
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery Virtual DOM Events Plugin
  • jquery对象和javascript对象即DOM对象相互转换
  • javascript开源软件 iis7站长之家
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • Jquery的ready和Dom的onload的区别分析
  • JQuery为页面Dom元素绑定事件及解除绑定方法
  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
  • jQuery 如何先创建、再修改、后添加DOM元素
  • Jquery方式获取iframe页面中的 Dom元素
  • jquery选择器排除某个DOM元素的方法(实例演示)
  • jQuery函数的第二个参数获取指定上下文中的DOM元素
  • jQuery 删除/替换DOM元素的几种方式
  • jQuery的DOM操作之删除节点示例
  • jQuery如何将选中的对象转化为原始的DOM对象
  • Jquery操作DOM对象的例子
  • 同域jQuery(跨)iframe操作DOM(实例讲解)
  • 同域jQuery(跨)iframe操作DOM(示例代码)
  • Jquery中DOM操作方法
  • jquery实例-DOM操作方法
  • jQuery中Dom的基本操作小结
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3