与Ajax同样重要的jQuery（2）

原创

Java帮帮 2022-04-02 14:57:51 ©著作权

文章标签 javascript jquery html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者Java帮帮的原创作品，请联系作者获取转载授权，否则将追究法律责任

练习9：

² 点击button 打印radio checkbox select 中选中项的值

$(function(){

// 点击button 打印radio checkbox select 中选中项的值

$("#mybutton").click(function(){

// 打印选中性别的值

$("input[name='gender']:checked").each(function(){

alert($(this).val());

});

// 打印爱好

$("input[name='hobby']:checked").each(function(){

alert($(this).val());

});

// 打印城市

$("select[name='city'] option:selected").each(function(){

alert($(this).val());

});

</script>

</head>

<body>

性别：<input type="radio" name="gender" value="男" /> 男

爱好: <input type="checkbox" name="hobby" value="体育" />体育

<input type="checkbox" name="hobby" value="读书" />读书

<input type="checkbox" name="hobby" value="音乐" />音乐

城市：<select name="city">

</select><br/>

</body>

与Ajax同样重要的jQuery（2）_html

3.jQuery选择器总结

①：对象访问核心方法

each(function(){}) 遍历集合

size()/length属性返回集合长度

index() 查找目标元素是集合中第几个元素

②：CSS样式操作

css(name,value) css({name:value,name:value}); 同时修改多个CSS样式

基本过滤选择器与筛选过滤 API功能是相同

$("tr:first") 等价于 $("tr").first()

③：九种选择器重点

l 基本选择器和层级选择器 锁定元素

l 使用属性过滤选择器和内容过滤选择器 具体选中元素

l 表单操作 :checked :selected 选中 表单选中元素

配合基本过滤选择器，缩小选中的范围

4.jQuery的DOM操作

使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用

①：查询

children([expr]) 获取指定的子元素

find(expr) 获取指定的后代元素

parents([expr]) 获得祖辈元素

parent() 获取父元素

next([expr]) 获取下一个兄弟元素

prev([expr]) 获取前一个兄弟元素

siblings([expr]) 获取所有兄弟元素

在XML 解析中 find 方法使用最多

对查找结果进行遍历操作 each(function(){… }) ，在each函数中可以通过this 获得DOM对象，$(this) 获得jQuery对象

②：属性操作

设置属性 attr(name,value)

读取属性 attr(name)

同时设置多个属性 attr({name:value,name:value... });

attr("checked","true") 等价于 prop("checked")

练习1：

² 点击一个button，动态设置 div的属性 id name class

² 尝试能否设置一个不存在的属性？

// 点击一个button，动态设置 div的属性 id name class

// 尝试能否设置一个不存在的属性？

$(function(){

$("#mybutton").click(function(){

// 可以设置一个不存在属性

$("#mydiv").attr({'id':'xxxdiv','name':'xxxxname','class':'xxxclass','itcastinfo':'xxxxitcast'});

});

</script>

</head>

<body>

<div id="mydiv">itcast</div>

</body>

与Ajax同样重要的jQuery（2）_html_02

③：CSS操作

通过attr属性设置/获取 style属性

attr('style','color:red'); // 添加style属性

设置CSS样式属性

css(name, value) 设置一个CSS样式属性

css(properties) 传递key-value对象，设置多个CSS样式属性

设置class属性

addClass(class) 添加一个class属性

removeClass([class]) 移除一个class属性

toggleClass(class)如果存在（不存在）就删除（添加）一个类

练习2：

² 点击button，使一个div的背景颜色变为黄色

² 通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原

$(function(){

// 点击button，使一个div的背景颜色变为黄色

$("#button1").click(function(){

$("#div1").css("background-color","yellow");

});

// 通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原

$("#button2").click(function(){

$("#div1").toggleClass("divclass");

});

</script>

.divclass {

color:red;

}

</style>

<body>

<div id="div1">AAAAAA</div>

</body>

与Ajax同样重要的jQuery（2）_jquery_03

④：HTML代码&文本&值操作

l 读取和设置某个元素中HTML内容

html() 读取innerHTML

html(content) 设置innerHTML

l 读取和设置某个元素中的文本内容

text() 读取文本内容

text(content) 设置文本内容

l 文本框、下拉列表框、单选框选中的元素值

val() 读取元素value属性

val(content) 设置元素value属性

练习3：

² <div><p>传智播客</p></div> 获取div中 html和text 对比

² 使用val() 获得文本框、下拉框、单选框选中的value

² 测试能否通过 val() 设置单选框、下拉框的选中效果

$(function(){

// <div><p>传智播客</p></div> 获取div中 html和text 对比

var $obj = $("<div><p>传智播客</p></div>");

// alert($obj.html());

// alert($obj.text());

//使用val() 获得文本框、下拉框、单选框选中的value

$("#mybutton").click(function(){

alert($("#username").val());

alert($("input[name='gender']:checked").val());

alert($("#city").val());

});

//测试能否通过 val() 设置单选框、下拉框的选中效果

$("#city").val("广州");

$("input[name='gender']").val(['女']);

});

</script>

</head>

<body>

用户名 <input type="text" id="username" /><br/>

性别 <input type="radio" name="gender" value="男" />男

城市 <select id="city">

</select><br/>

</body>

与Ajax同样重要的jQuery（2）_jquery_04

设置 val控制radio select checkbox 选中

$("#city").val("广州");

$("input[name='gender']").val(['女']);

练习4：

² 输出所有select元素下的所有option元素中对应的文本内容

例如:<option value="中专">中专^^</option> 输出--->中专^^

$(function(){

$("#edu option").each(function(){

alert($(this).text());

});

</script>

</head>

<body>

</select>

⑤：jQuery添加元素

l 创建元素

拼接好HTML代码片段 $(html片段) ---- 产生jQuery对象

l 内部插入：

$node.append($newNode) 内部结尾追加

$node.prepend($newNode) 内部开始位置追加

l 外部插入：

$node.after($newNode) 在存在元素后面追加 -- 兄弟

$newNode.insertBefore($node) 在存在元素前面追加

练习5：

² 在id=edu下增加<option value="大专">大专</option>

$(function(){

// 追加 option 内容大专

// 创建元素

var $newNode = $("<option value='大专'>大专</option>");

// 添加元素

// $("#edu").append($newNode); // 内部结尾

// $("#edu").prepend($newNode); // 内部开始

// $("option[value='本科']").after($newNode);

$newNode.insertBefore($("option:contains('高中')"));

});

</script>

<body>

</select>

与Ajax同样重要的jQuery（2）_javascript_05

⑥：jQuery删除元素

选中要删除元素.remove() ---- 完成元素删除

选中要删除元素.remove(expr) ----- 删除特定规则元素

remove删除节点后，事件也会删除

detach删除节点后，事件会保留从1.4新API

练习6：

² 分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在

$(function(){

$("p").click(function(){

alert($(this).text());

});

// 使用remove方法删除 p元素，连同事件一起删除

// var $p = $("p").remove();

// 使用detach删除，事件会保留

var $p = $("p").detach();

$(document.body).append($p);

});

</script>

</head>

<body>

</body>

与Ajax同样重要的jQuery（2）_html_06

练习7：

² 表格数据添加与删除练习

$(function(){

$("#mybutton").click(function(){

var name = $("#name").val();

var email = $("#email").val();

var phone = $("#phone").val();

// DOM添加

var $tr =

$("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='' onclick='del(this)'>删除</a></td></tr>");

$("table").append($tr);

});

function del(o) {

// 对象o 代表a 标签

$(o).parents("tr").remove();

}

</script>

</head>

<body>

<form>

姓名 <input type="text" id="name" />

邮箱 <input type="text" id="email" />

手机<input type="text" id="phone" /><br/>

</form>

<hr/>

<tr>

</tr>

</table>

与Ajax同样重要的jQuery（2）_javascript_07

⑦：jQuery复制和替换

l 复制节点

$(“p”).clone(); 返回节点克隆后的副本，但不会克隆原节点的事件

$(“p”).clone(true); 克隆节点，保留原有事件

l 替换节点

$("p").replaceWith("<b>ITCAST</b>"); 将所有p元素，替换为"<b>ITCAST</b>“

$(“<b>ITCAST</b>”).replaceAll(“p”); 与replaceWith相反

⑧：全选以及左右移动练习

练习8：

² 全选练习

$(function(){

// 全选/ 全不选

$("#checkallbox").click(function(){

var isChecked = this.checked;

$("input[name='hobby']").each(function(){

this.checked = isChecked;

});

// 全选

$("#checkAllBtn").click(function(){

$("input[name='hobby']").attr("checked","checked");

});

// 全不选

$("#checkAllNotBtn").click(function(){

$("input[name='hobby']").removeAttr("checked");

});

// 反选

$("#checkOppoBtn").click(function(){

$("input[name='hobby']").each(function(){

this.checked = !this.checked;

});

</script>

<body>

请选择您的爱好<br/>

<input type="checkbox" name="hobby" value="足球" /> 足球

<input type="checkbox" name="hobby" value="篮球" /> 篮球

<input type="checkbox" name="hobby" value="游泳" /> 游泳

</body>

与Ajax同样重要的jQuery（2）_html_08

练习9：

² 左右移动练习

$(function(){

//选中的去右边

$("#chooseToRight").click(function(){

$("#right").append($("#left option:selected"));

});

// 全去右边

$("#allToRight").click(function(){

$("#right").append($("#left option"));

});

// 全去左边

$("#allToLeft").click(function(){

$("#left").append($("#right option"));

});

//选中的去左边

$("#chooseToLeft").click(function(){

$("#left").append($("#right option:selected"));

});

</script>

</head>

<body>

</select>

<input type="button" value="-->" id="chooseToRight" />

<input type="button" value="==>" id="allToRight" />

</select>

</body>

与Ajax同样重要的jQuery（2）_html_09

5.jQuery事件

①：事件绑定

传统js 一般一个对象只能绑定某种事件一个函数

jQuery 支持对同一个对象，同一个事件可以绑定多个函数

绑定事件函数到对象有两种写法

写法一

$("div").click(function(){

……

});

取消绑定：$("div").unbind("click");

*** live 为满足条件对象，实时追加绑定、取消live事件用die方法

Demo:

$(function(){

// 使用live绑定

$("div").live("click",function(){

alert($(this).text());

});

// $("div").click(function(){

// alert($(this).text());

// });

// 解除绑定

// $("div").unbind("click");

// 新加入div元素没有之前div元素绑定事件

$(document.body).append($("<div>CCC</div>"));

});

</script>

</head>

<body>

</body>

与Ajax同样重要的jQuery（2）_javascript_10

②：事件一次性绑定和自动触发

一次性事件 one(type, [data], fn) 为对象绑定一次性事件，只有一次有效

触发事件 trigger(type, [data]) 触发目标对象指定的事件执行

练习1：

² 为页面内所有p 元素绑定一次性事件，点击打印p元素中内容

² 页面内有两个按钮，点击按钮1，触发按钮2的 click事件执行

$(function(){

//为页面内所有p 元素绑定一次性事件，点击打印p元素中内容

$("p").one("click",function(){

alert($(this).text());

});

//页面内有两个按钮，点击按钮1，触发按钮2的 click事件执行

$("#mybutton1").click(function(){

alert("点击了按钮一");

// 触发2 click事件

$("#mybutton2").trigger("click");

});

$("#mybutton2").click(function(){

alert("点击了按钮二");

});

</script>

<body>

</body>

与Ajax同样重要的jQuery（2）_javascript_11

③：事件切换

hover(mouseover,mouseout) 模拟鼠标悬停事件

toggle(fn1,fn2,fn3...) ; 鼠标点击一次触发一个函数

练习1：

² 编写一个div元素，光标移动上去字体变为红色，移开后变为蓝色

² 建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张

$(function(){

// 编写一个div元素，光标移动上去字体变为红色，移开后变为蓝色

$("div").hover(function(){

// over

$(this).css("color","red");

},function(){

// out

$(this).css("color","blue");

});

// 建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张

$("img").toggle(function(){

$(this).attr("src","2.jpg");

},function(){

$(this).attr("src","3.jpg");

},function(){

$(this).attr("src","4.jpg");

});

</script>

<body>

<div>鼠标移动上会变色的内容！</div>

</body>

④：事件阻止默认动作和传播

l 默认动作阻止

$("a").click(function(event){

event.preventDefault();

// do something

});

l 取消事件冒泡

$("p").click(function(event){

event.stopPropagation();

// do something

});

$(function(){

// 通过event阻止默认事件

$("#dellink").click(function(event){

var isConfirm = window.confirm("确认删除吗？");

if(!isConfirm){

event.preventDefault();

}

});

$("div").click(function(){

alert($(this).html());

});

// 阻止事件冒泡

$("p").click(function(event){

alert($(this).html());

event.stopPropagation();

});

</script>

<body>

</body>

上一篇：jQuery的Ajax开发步骤

下一篇：与Ajax同样重要的jQuery（1）

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯