jQuery DOM操作

jQuery是最有名的JavaScript库,它解决了几个重要的问题:

  1. 消除浏览器对于JavaScript的支持差异;
  2. 方便简洁的DOM操作方法;
  3. 方便地实现简单的动画效果;

在进行DOM操作之前,首先要获取DOM元素。jQuery获取DOM元素是通过jQuery的选择器实现的,jQuery选择器通过参数找到对应DOM元素,并返回jQuery对象,这个对象实际上是选择器找到的DOM对象的数组集合,如果没有找到,返回空数组。选择器查找结果如果后面是对元素的操作,那么操作将会对选择器查找到的DOM对象数组中的每个DOM对象进行同样的操作。

1. DOM选择

$('#id') // 按ID查找
$('tag') // 按tag查找
$('.className') // 按class查找
$('[property=value]') // 按属性查找

// 以上选择器可以进行组合进行查找
// 选择器之间使用 “,”隔开,可以进行多项一起查找

$('ancestor descendant') // 层级查找,中间使用空格隔开两个选择器
$('parent>child') // 子选择器,通过有父子层级关系的选择器实现

$('selector:first-child'); // 选出第一个子节点
$('selector:last-child'); // 选出最后一个子节点
$('selector:nth-child(N)'); // 选出第N个子元素,N从1开始
$('selector:nth-child(even)'); // 选出序号为偶数的子元素
$('selector:nth-child(odd)'); // 选出序号为奇数的子元素

jquery_object.find('selector') // 通过已查找到的jQuery对象继续查找
jquery_object.parent() // 通过已查找到的jQuery对象查找父节点对象
jquery_object.next() // 通过已查找到的jQuery对象查找同级下一个节点对象
jquery_object.prev() // 通过已查找到的jQuery对象查找同级上一个节点对象

2. DOM操作

jquery_object.text() // 获取DOM对象的文本值
jquery_object.html() // 获取DOM对象的html值
jquery_object.text('new_value') // 更改DOM对象的文本值
jquery_object.html() // 更改DOM对象的html值
jquery_object.css('property','value') // 设置DOM对象的CSS属性值
jquery_object.addClass('class_name') // DOM对象添加class值
jquery_object.removeClass('class_name') // DOM对象删除class值
jquery_object.show() // 显示隐藏的DOM元素s
jquery_object.hide() // 隐藏DOM元素
jquery_object.attr('property','value') // 设置DOM对象的属性值
jquery_object.removeAttr('property_name') // 移除DOM对象属性
jquery_object.val() // 获取input对象的值

jquery_object.append('html_string') // 添加子元素
jquery_object.prepend('html_string') // 在最前面添加子元素
jquery_object.remove() // 删除DOM元素
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,849评论 0 44
  • 库和框架的区别? 框架也算是库的一种,但倾向于重量级一些,倾向于提供整套的解决方案,倾向于创造一些需要你来遵守的规...
    Iswine阅读 2,607评论 0 1
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 4,622评论 0 9
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 4,296评论 0 8
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,800评论 18 503