一、样式操作

样式类

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

示例:开关灯和模态框

CSS

css("color","red") // DOM操作:tag.style.color="red"

示例:

$("p").css("color", "red");  // 将所有p标签的字体设置为红色

二、位置操作

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

.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。

和 .position()的差别在于: .position()是相对于相对于父级元素的位移。

示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
.c1 {
width: 100px;
height: 200px;
background-color: red;
} .c2 {
height: 50px;
width: 50px; position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
} .hide {
display: none;
} .c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div> <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery.js"></script>
<script>
$("#b1").on("click", function () {
$(".c1").offset({left: 200, top: 200});
}); $(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
} else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>

返回顶部

三、尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

四、文本操作

HTML代码:

html()    // 取得第一个匹配元素的html内容
html(val) // 设置所有匹配元素的html内容

文本值:

text()    // 取得所有匹配元素的内容
text(val)/ / 设置所有匹配元素的内容

值:

val()             // 取得第一个匹配元素的当前值
val(val) // 设置所有匹配元素的值
val([val1, val2]) // 设置多选的checkbox、多选select的值

例如:

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球 <select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

设置值:

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

示例:

获取被选中的checkbox或radio的值:

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可以使用:

$("input[name='gender']:checked").val()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error {
color: red;
}
</style>
</head>
<body> <form action="">
<p>
<label>用户名
<input type="text" name="username">
</label>
<span class="error"></span>
</p>
<p>
<label>密码
<input id="pwd" type="text" name="password">
</label>
<span class="error"></span>
</p>
<p>
<button id="login" type="button">登陆</button>
</p>
</form>
<script src="jquery.js"></script>
<script>
// 1. 找到的登陆按钮,绑定点击事件
// $("#login")[0].onclick = function () {
// var $usernameInput = $('[name="username"]');
// var $passwordInput = $('[name="password"]');
// // 2. 获取用户名和密码输入框的值
// var usernameVal = $usernameInput.val();
// var passwordVal = $passwordInput.val();
// // 3. 判断值是否为空
// if (!usernameVal.trim()) {
// // 4. 如果是空,在对应的span.error标签中显示提示信息
// // 4.1 提示信息是什么?
// $usernameInput.parent().next('.error').text('用户名不能为空!')
// }
// if (!passwordVal.trim()) {
// // 4. 如果是空,在对应的span.error标签中显示提示信息
// // 4.1 提示信息是什么?
// $passwordInput.parent().next('.error').text('密码不能为空!')
// }
//
// } $("#login")[0].onclick = function () {
// 1. 找到所有需要判断的input输入框
var $inputEles = $("label>input");
// 2. for玄幻依次做判断
for (var i = 0; i < $inputEles.length; i++) {
var $tmp = $($inputEles[i]); // $(DOM对象) --> jQuery对象
if (!$tmp.val().trim()) {
var prefix = $tmp.parent().text().trim();
$tmp.parent().next().text(prefix + '不能为空');
}
}
}; // 给获取用户u输入的input框绑定事件
var $inputEles = $("label>input");
for (var i = 0; i < $inputEles.length; i++) {
$inputEles[i].onfocus = function () {
$(this).parent().next().text("");
}
} </script>
</body>
</html>

自定义登录效验示例

五、属性操作

用于ID等或自定义属性:

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

用于checkbox和radio

prop()       // 获取属性
removeProp() // 移除属性

注意:

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>

prop和attr的区别:

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。

举个例子:

<input type="checkbox" id="i1" value="1">

针对上面的代码,

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked") // false

可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。

如果换成下面的代码:

<input type="checkbox" checked id="i1" value="1">

再执行:

$("#i1").attr("checked")  // checked
$("#i1").prop("checked") // true

这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。

接下来再看一下针对自定义属性,attr和prop又有什么区别:

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

执行以下代码:

$("#i1").attr("me")  // "自定义属性"
$("#i1").prop("me") // undefined

可以看到prop不支持获取标签的自定义属性。

总结一下:

  1. 对于标签上有的能看到的属性和自定义属性都用attr
  2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老板</td>
<td>开车</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>景女神</td>
<td>茶道</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊(苑局)</td>
<td>不洗头、不翻车、不要脸</td>
</tr>
</tbody>
</table> <script src="jquery.js"></script>
<script>
// 点击全选按钮 选中所有的checkbox
// DOM绑定事件方法
// $("#all")[0].onclick = function(){}
// jQuery绑定事件方法
$("#all").click(function () {
$(":checkbox").prop('checked', true);
});
// 取消
$("#cancel").on("click", function () {
$(":checkbox").prop('checked', false);
});
// 反选
$("#reverse").click(function () {
// 1. 找到所有选中的checkbox取消选中
// $("input:checked").prop('checked', false);
// // 2. 找到没有选中的checkbox选中
// $("input:not(:checked)").prop('checked', true); // 1. for循环所有的checkbox,挨个判断原来选中就取消选中,原来没选中就选中
var $checkbox = $(":checkbox");
for (var i = 0; i < $checkbox.length; i++) {
// 获取原来的选中与否的状态
var status = $($checkbox[i]).prop('checked');
$($checkbox[i]).prop('checked', !status);
}
// 2. 先用变量把原来的状态保存下来
// var $unchecked = $("input:not(:checked)");
// var $checked = $("input:checked");
//
// $unchecked.prop('checked', true);
// $checked.prop('checked', false);
}) </script>
</body>
</html>

全选、取消、反选

六、文档处理

添加到指定元素内部的后面

$(A).append(B)   // 把B追加到A
$(A).appendTo(B) // 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)   // 把B前置到A
$(A).prependTo(B) // 把A前置到B

添加到指定元素外部的后面

$(A).after(B)       // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)       // 把B放到A的前面
$(A).insertBefore(B) // 把A放到B的前面

移除和清空元素

remove() // 从DOM中删除所有匹配的元素。
empty() // 删除匹配的元素集合中所有的子节点。

例子:

点击按钮在表格添加一行数据。

点击每一行的删除按钮删除当前行数据。

替换

replaceWith()
replaceAll()

克隆

clone() // 参数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>克隆</title>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
} #b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body> <button id="b1">屠龙宝刀,点击就送</button>
<hr>
<button id="b2">屠龙宝刀,点击就送</button> <script src="jquery.js"></script>
<script>
// clone方法不加参数true,克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true,克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>

克隆示例

前端基础之jQuery操作标签的更多相关文章

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

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

  2. 前端基础之:JQuery(可编辑版)

     前端基础之jquery   一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2]   ...

  3. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  4. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  5. 进击的Python【第十六章】:Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  6. jQuery操作标签

    jQuery操作标签 样式操作: 对标签的样式进行修改,那么操作样式的方法是什么? 样式类: addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名 ...

  7. Django基础之jQuery操作

    Django基础之jQuery操作 jquery之cookie操作 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.j ...

  8. day 66 Django基础之jQuery操作cookie

    Django基础之jQuery操作cookie   jquery之cookie操作 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery. ...

  9. day 62 Django基础之jQuery操作cookie

    Django基础之jQuery操作cookie   jquery之cookie操作 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery. ...

随机推荐

  1. TCHART FROM DATATABLE

    using System;using System.Collections;using System.ComponentModel;using System.Drawing;using System. ...

  2. c#万能视频播放器

    http://blog.csdn.net/yanzhibo/article/details/8972822 本人之前很多的文章中均提到了使用libvlc为播放器内核制作的播放器,也许有些朋友对此感兴趣 ...

  3. Building designing UVA - 11039

    先取正的和负的绝对值较小者为开头 .然后交替从正负数中取绝对值最小但比上一个大的. 证明: 1.开头选正负数中绝对值较小的:否则能再多放1个. 2.交替选的时候选最小的符合条件的:如果大的符合,换小的 ...

  4. vue核心之虚拟DOM

    一.前言 虚拟DOM概念随着react的诞生而诞生,由facebook提出,其卓越的性能很快得到广大开发者的认可:继react之后vue2.0也在其核心引入了虚拟DOM的概念,本文将以vue2.0使用 ...

  5. 【洛谷p1507】NASA的食物计划

    (一次a……) NASA的食物计划[传送门] 好的上算法标签: 嗯这是个二维背包 (万年不变分隔线) 二维的题就是在一维基础上增加了一个条件,这个背包不仅含有质量还有体积.所以我们增加一层循环.核心算 ...

  6. Python基础之模块以及5大模块的使用

    内容梗概: 1. 模块的简单认识 2. collections模块 3. time时间模块 4. random模块 5. os模块 6. sys模块 1.模块的简单认识定义:模块就是我们把装有特定功能 ...

  7. php-fpm.conf文件的位置在哪里

    在php的安装目录下的etc目录下:

  8. 函数和函数模版在一个。cpp中的情况!(除了左移和右移,其他的不要用友元函数!!!)

    // 友元函数和运算符重载的碰撞.cpp : 定义控制台应用程序的入口点. // #include <iostream> using namespace std; template < ...

  9. java利用EasyPoi实现Excel导出功能

    easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 就可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出,通过简单的注解和模板 语言( ...

  10. Mysql for Linux安装配置之—— 源码安装

    1.安装 --假设已经有mysql-5.5.10.tar.gz以及cmake-2.8.4.tar.gz两个源码压缩文件1)先安装cmake(mysql5.5以后是通过cmake来编译的)   # ta ...