JavaWeb_jQuery基础篇
Posted 葡萄籽-June
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb_jQuery基础篇相关的知识，希望对你有一定的参考价值。
jQuery基础篇
本文主要是jQuery入门的理解。所总结的内容主要包括：
1.jQuery 的属性操作
2.DOM的增删改操作
3.jQuery 事件操作
…
【注】jQuery在线手册
文章目录
一、jQuery 的属性操作
| 属性操作 | 作用 |
|---|---|
| html() | 设置和获取起始标签和结束标签中的内容。类似于dom 属性innerHTML |
| text() | 可以设置和获取起始标签和结束标签中的文本。类似于dom 属性innerText |
| val() | 设置和获取表单项的value 属性值。类似于dom 属性value |
| attr() | 设置和获取属性的值(不推荐操作checked、readOnly、selected、disabled 等等) |
| attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj | |
| prop() | 可设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled 等等 |
val 方法同时设置多个表单项的选中状态：
//script代码
<script type="text/javascript" src="script/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function ()
// 批量操作单选
$(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
);
);
</script>
<body>
单选：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多选：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
jQuery练习——全选/全不选/反选
二、DOM 的增删改操作
| 方法 | 作用 |
|---|---|
| 内部插入 | 向每个匹配的元素内部追加内容。 |
| appendTo() | a.appendTo(b) =》把a 插入到b 子元素末尾，成为最后一个子元素 |
| prependTo() | a.prependTo(b) =》把a 插到b 所有子元素前面，成为第一个子元素 |
| 外部插入 | 在每个匹配的元素之前、后插入内容。 |
| insertAfter() | a.insertAfter(b) =》在每个匹配的元素之后插入内容：把a 插入到b的后面，结果 b a |
| insertBefore() | a.insertBefore(b) =》=》在每个匹配的元素之前插入内容：把a 插入到b的前面，结果a b |
| 替换 | 将所有匹配的元素替换成指定的或所有的HTML或DOM元素。 |
| replaceWith(content/fn) | a.replaceWith(b) 用b 替换掉指定的a |
| replaceAll(selector) | a.replaceAll(b) 用a 替换掉所有的b |
| 删除 | 从DOM中删除所有匹配的元素或子节点。 |
| remove() | a.remove(); 删除a 标签 |
| empty() | a.empty(); 清空a 标签里的内容 |
具体方法说明请祥看jQuery在线手册
简单的实践：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 页面加载完成
$(function ()
// 第一个按钮【选中添加到右边】
$("button:eq(0)").click(function ()
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
);
// 第二个按钮【全部添加到右边】
$("button:eq(1)").click(function ()
$("select:eq(0) option").appendTo($("select:eq(1)"));
);
// 第三个按钮【选中删除到左边】
$("button:eq(2)").click(function ()
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
);
// 第四个按钮【全部删除到左边】
$("button:eq(3)").click(function ()
$("select:eq(1) option").appendTo($("select:eq(0)"));
);
);
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
jQuery练习——动态表格
三、jQuery 事件操作
在总结事件操作之前，需要先了解一个知识点：
$( function() ); 和 window.onload = function() 的区别是什么？
| 区别 | jQuery | 原生JS |
|---|---|---|
| 触发时机 | jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM 对象之后就会马上执行。 | 原生js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM 对象，还要等标签显示时需要的内容加载完成。 |
| 触发顺序 | jQuery 页面加载完成之后先执行 | 原生js 的页面加载完成之后 |
| 执行次数 | jQuery 的页面加载完成之后是全部把注册的function 函数，依次顺序全部执行。 | 原生js 的页面加载完成之后，只会执行最后一次的赋值函数。 |
3.1 jQuery中其他事件的处理方法
| 方法 | 作用 |
|---|---|
| click() | 绑定单击事件，以及触发单击事件 |
| mouseover() | 鼠标移入事件 |
| mouseout() | 鼠标移出事件 |
| bind() | 给元素一次性绑定一个或多个事件。 |
| one() | 使用上类似于bind 一样。但是one 方法绑定的事件只会响应一次。 |
| unbind() | 与bind 方法相反的操作，解除事件的绑定 |
| live() | 用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件；即使这个元素是后面动态创建出来的也有效 |
3.2 事件的冒泡
事件的冒泡指:
父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
如何阻止事件冒泡：
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
3.3 获取事件的对象
首先，javaScript 事件对象是什么？
事件对象，是封装有触发的事件信息的一个javascript 对象。
如何获取呢javascript 事件对象？
在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。
这个event 就是javascript 传递参事件处理函数的事件对象。
例如：原生JavaScript 获取事件对象
//1.原生javascript 获取事件对象
window.onload = function ()
document.getElementById("areaDiv").onclick = function (event)
console.log(event);
而 jQuery 获取事件对象
//2.jQuery 代码获取事件对象
$(function ()
$("#areaDiv").click(function (event)
console.log(event);
);
);
使用bind 同时对多个事件绑定同一个函数。如何获取当前操作是哪一个事件：
//鼠标移入移出事件举例
$("#areaDiv").bind("mouseover mouseout",function (event)
if (event.type == "mouseover")
console.log("鼠标移入");
else if (event.type == "mouseout")
console.log("鼠标移出");
);
jQuery练习_图片的跟随
以上是关于JavaWeb_jQuery基础篇的主要内容，如果未能解决你的问题，请参考以下文章