jquery对象操作html标签大全

jQuery简介

jQuery定义

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery使用户能够更方便地处理HTML Document、Events事件处理、实现动画效果设计、方便地进行Ajax交互，能够极大地简化JavaScript编程。
jQuery本质上就是js封装的函数库。

jQuery对象

1. 定义
   jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也不能使用 jQuery里的方法。
   注意：遍历出来就是js对象。js 和jquery不可混用，js的对象不可以访问jquery函数，jquery的对象不可以访问js函数。
2. 获取jquery对象
   大招：$=jQuery。
   $(selector) = 获取该选择器的jQuery对象数组 $(selector).action(…)指jquery对象数组的群体操作特性。
3. jquery对象与js对象相互转换
   var $obj = $(jsObj); js对象转换为jquery对象
   var jsObj = $obj[0];
   var jsObj = $obj.get(0);

jquery对象获取

基本选择器

语法：$(selector) selector代表选择器

1. 通用元素选择器：$("*") 相当于通配符
2. id选择器：$("#id")
3. 标签选择器：$(“tagName”)
4. class选择器：$(".className")

组合选择器

语法：$(selectors) selectors代表组合选择器，和css的组合选择器的含义是一样的

1. 并集选择器：$(“x,y,z”)
   找出x,y,z的标签对象
2. 后代选择器： $(“x y”);
   找出x的所有后代y（子子孙孙）的标签对象
3. 子代选择器：$(“x > y”);
   找出 x的所有儿子y（儿子）的标签对象
4. 相邻兄弟选择器：$(“x + y”)
   找到所有紧挨在x后面的y的标签对象
5. 兄弟选择器：$(“x ~ y”)
   找到x之后所有的兄弟y的标签对象

form表单属性选择器

主要针对form表单元素的属性而来的jquery标签对象，根据表单元素的种类分为以下三种情况：

1. type：表单类型:text/radio/checkbox/number/password/data/email/tel/file/range/select/textarea/button
   $(“input[type=‘checkbox’]”);// 取到checkbox类型的input标签
2. name：java后台取值用的键
   $(“input[name=‘stuName’]”) // 取到name属性为stuName类型的input标签
3. id：js前端取值用、美化用的键
   $("#id") 前面已经讲过了。
4. 表单对象属性:
   :enabled #可用的
   :disabled
   :checked #单选和复选框
   :selected #下拉框
   $(":selected") // 找到所有被选中的option

此外：
上述三者方法针对所有的表单元素，每种方法是可以省略input的。

1. type：表单类型
   $("[type=‘checkbox’]");// 取到checkbox类型的input标签
2. name：java后台取值用的键
   $("[name=‘stuName’]") // 取到name属性为stuName类型的input标签

伪类选择器

语法：$(selector:operation) selector代表选择器，operation代表筛选的操作，和css的结构伪类选择器的含义是一样的

• 结构伪类：

1. :first // 第一个 $(“div:first”);
2. :last // 最后一个 $(“div:last”);

• 子代结构选择器：

3. :eq(index)// 索引等于index的那个元素 $(“div:eq(1)”);
4. :even // 匹配所有索引值为偶数的元素，从 0 开始计数
5. :odd // 匹配所有索引值为奇数的元素，从 0 开始计数

• 兄弟结构选择器：

6. :gt(index)// 匹配所有大于给定索引值的元素
7. :lt(index)// 匹配所有小于给定索引值的元素
8. :not(selector)// 找到所有满足not条件的标签，即在这个标签内没有not中的条件
9. :has(selector)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

jquery对象操作对象

获取对象

var $obj = $(selector);

1. 获取子元素数组：
   a) 子元素数组：var $objChilds = $obj.children(selector);
   b) 后代检索：var $descendents = $(document).find(selector);
2. 获取兄弟元素：
   a) 前置元素：
   i. var $bigBros = $ref.prev([selector]);前一个（带有selector选择器）的元素 只能是前一个
   ii. var $bigBros = $ref.prevAll([selector]); 前所有（带有selector选择器）的元素
   iii. var $bigBros = $ref.prevUntil(selector); 前n个到selector选择器结束之前的元素
   b) 后置元素：
   i. var $littleBros = $ref.next([selector]); 后一个（带有selector选择器）的元素 只能是后一个
   ii. var $littleBros = $ref.nextAll([selector]); 后所有（带有selector选择器）的元素
   iii. var $littleBros = $ref.nextUntil(selector); 后n个到selector选择器结束之前的元素
   c) 其他兄弟：
   var $otherBros = $ref.siblings([selector]); 除了自己以外（带有selector选择器）的元素
3. 获取父级元素：
   a) 父级元素：var parent = $ref.parent([selector]);
   b) 父辈元素：var parents = $ref.parents(selector);

操作对象

一. jquery 创建HTML标签对象
var $newEl = $(<div id=”…” class=”…” …></div>);
二. jquery 操作HTML标签对象 var $el = …；

• 操作值

1. 表单元素的值： var val = $el.val(); $el.val(new_value);
2. 非表单元素的文本： var txt = $el.text(); $el.text(new_text);
3. 非表单元素的内部结构： var structor = $el.html(); $el.html(new_structor);

• 操作属性
  var attrVal = $el.attr(attr_name); $el.attr(attr_name, new_attr);
• 操作样式

4. 具体样式：
   a) $el.css(“cssName”,”cssValue”);
   b) $el.css({“cn1”:”cv1”, … , “cnn”:”cvn”})
5. 类选择器：
   a) var bool = $el.hasClass(“classSelector”);
   b) $el.addClass(“classSelector”);
   c) $el.removeClass(“classSelector”);
   d) $el.toggleClass(“classSelector”);

• 操作子元素

6. 添加子元素：$el.append(tagEl);
7. 删除元素: $el.remove();

jquery对象操作标签

样式类操作

1. addClass();// 添加指定的CSS类名。
2. removeClass();// 移除指定的CSS类名。
3. hasClass();// 判断样式存不存在
4. toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

位置类操作

1. offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
2. position()// 获取匹配元素相对父元素的偏移
3. scrollTop()// 获取匹配元素相对滚动条顶部的偏移
4. scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

文本操作

1. HTML代码：
   html()// 取得第一个匹配元素的html内容
   html(val)// 设置所有匹配元素的html内容
2. 文本值：
   text()// 取得所有匹配元素的内容
   text(val)// 设置所有匹配元素的内容
3. val值：用于获取form表单的值
   val()// 取得第一个匹配元素的当前值
   val(val)// 设置所有匹配元素的值
   val([val1, val2])// 设置checkbox、select的值
4. form表单

• 获取值：
  • 获取单选框被选中的value值
    $(‘input[type=radio]:checked’).val()
  • 复选框被选中的value,获取的是第一个被选中的值
    $(‘input[type=checkbox]:checked’).val()
  • 下拉列表被选中的值
    $(“select[name=‘book’] option:selected”).val()
  • 下拉列表被选中的值，获取的是第一个被选中的值
    $(“select[name='tv] option:selected”).val()
• 设置值：
  • 设置单选按钮和多选按钮被选中项
    $(‘input[type=radio]’).val([‘112’]);
    $(‘input[type=checkbox]’).val([‘a’,‘b’]);
  • 设置下拉列表框的选中值，必须使用select
    因为option只能设置单个值，当给select标签设置multiple。
    那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
    $(‘select’).val([‘3’,‘2’])

文本操作

1. attr(attrName)// 返回第一个匹配元素的属性值
2. attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
3. attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
4. removeAttr()// 从每一个匹配的元素中删除一个属性attr():