与Ajax同样重要的jQuery(2)

练习9:

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

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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="radio" name="gender" value="女"/> 女 <br/>
爱好: <input type="checkbox" name="hobby" value="体育" />体育
<input type="checkbox" name="hobby" value="读书" />读书
<input type="checkbox" name="hobby" value="音乐" />音乐
<input type="checkbox" name="hobby" value="旅游" />旅游 <br/>
城市 :<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select><br/>
<input type="button" value="获取选中的值 " id="mybutton" />
</body>

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

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

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 点击一个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>
<input type="button" value="设置属性" id ="mybutton" />
</body>

③: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) 实现点击 字体变为紅色,再点击样式还原

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 点击button,使一个div的背景颜色变为 黄色
$("#button1").click(function(){
$("#div1").css("background-color","yellow");
});
// 通过toggleClass(class) 实现点击 字体变为紅色,再点击样式还原
$("#button2").click(function(){
$("#div1").toggleClass("divclass");
});
});
</script>
<style type="text/css">
.divclass {
color:red;
}
</style>
<body>
<div id="div1">AAAAAA</div>
<input type="button" value="背景颜色变为黄色" id="button1" />
<input type="button" value="字体颜色开关" id="button2" />
</body>

④: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() 设置单选框、下拉框的选中效果

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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="男" />男
<input type="radio" name="gender" value="女" /> 女<br/>
城市 <select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select><br/>
<input type="button" value="获取val" id="mybutton"/>
</body>

设置 val控制radio select checkbox 选中

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

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

练习4:

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

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

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#edu option").each(function(){
alert($(this).text());
});
});
</script>
</head>
<body>
<select id="edu">
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
</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>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 追加 option 内容大专
// 创建元素
var $newNode = $("<option value='大专'>大专</option>");
// 添加元素
// $("#edu").append($newNode); // 内部结尾
// $("#edu").prepend($newNode); // 内部开始
// $("option[value='本科']").after($newNode);
$newNode.insertBefore($("option:contains('高中')"));
});
</script>
<body>
<select id="edu">
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
</select>

⑥:jQuery删除元素

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

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

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

detach删除节点后,事件会保留 从1.4新API
练习6:
² 分别使用detach和remove 删除带有click事件的p标签,删除后再将p 重新加入body 查看事件是否存在
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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>
<p>AAA</p>
<div>BBB</div>
</body>

练习7:

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

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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='javascript:void(0)' 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/>
<input type="button" value="提交" id="mybutton"/>
</form>
<hr/>
<table border="1" width="400">
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>手机</th>
<th>删除</th>
</tr>
</table>

⑦:jQuery复制和替换

l 复制节点

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

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

l 替换节点

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

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

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

练习8:

² 全选练习

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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" id="checkallbox" /> 全选/全不选 <br/>
<input type="checkbox" name="hobby" value="足球" /> 足球
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
<input type="button" value="全选" id="checkAllBtn" />
<input type="button" value="全不选" id="checkAllNotBtn" />
<input type="button" value="反选" id="checkOppoBtn" />
</body>

练习9:

² 左右移动练习

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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 id="left" multiple="multiple" size="15">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>杭州</option>
<option>武汉</option>
<option>广州</option>
<option>深圳</option>
<option>南京</option>
</select>
<input type="button" value="-->" id="chooseToRight" />
<input type="button" value="==>" id="allToRight" />
<input type="button" value="<--" id="chooseToLeft" />
<input type="button" value="<==" id="allToLeft" />
<select id="right" multiple="multiple" size="15">
<option>郑州</option>
</select>
</body>

5.jQuery事件

①:事件绑定

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

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

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

写法一

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

……

});

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

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

Demo:

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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>
<div>AAA</div>
<div>BBB</div>
</body>

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

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

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

练习1:

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

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

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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>
<p>传智播客</p>
<input type="button" value="按钮一" id="mybutton1" />
<input type="button" value="按钮二" id="mybutton2" />
</body>

③:事件切换

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

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

练习1:

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

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

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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>
<img src="1.jpg" width="240" height="180" />
</body>

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

l 默认动作阻止

$("a").click(function(event){
event.preventDefault();
// do something
});
l 取消事件冒泡
$("p").click(function(event){
event.stopPropagation();
// do something
});
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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>
<a href="del?id=1" id="dellink">删除资料</a>
<div><p>信息</p></div>
</body>

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2017-03-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

wxss学习《五》所有以a,b开头的属性

整理下小程序里所有的css属性吧,这样也能好查询,按照字母表列举: a 共有15个属性:其中9个为动画animation的属性。详情如下: ? ? 1.addi...

2198
来自专栏静默虚空的博客

HTML 简介

HTML 简介 超文本标记语言  (Hypertext Markup Language, HTML)  是一个可以用来结构化你的Web内容并给予其含义和目标的...

2119
来自专栏极客编程

React快速入门

React是Facebook开源的一个用于构建用户界面的Javascript库,已经 应用于Facebook及旗下Instagram。

1611
来自专栏欧阳大哥的轮子

Android中的视图焦点Focus的详细介绍

在非触摸屏设备中接收事件和处理响应的控件是具有焦点(Focused)的控件。一个窗口中一个时间内只能有一个具有焦点的控件。在早期具有滚轮设备的android系统...

1112
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种常用控件

本篇为大家简单介绍Windows 商店应用中控件的用法,为方便讲解,我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明。 1. 文本控件 (1)...

3524
来自专栏Google Dart

AngularDart Material Design 选项卡 顶

注意:为了获得高质量的用户体验,选项卡条的用户必须将焦点设置为新显示的内容,以便1)选项卡不保留焦点样式,2)屏幕阅读器可以计算已更改的内容。

1162
来自专栏个人随笔

列表,表格与媒体元素

一.列表   列表就是信息资源的一种展示形式  1.列表及其应用    1)无序列表      无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无...

33410
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

1743
来自专栏肖蕾的博客

解决安卓中XML文件声明高度 宽度无效的问题

1073
来自专栏强仔仔

JQuery之内置函数响应事件

今天给大家介绍一下on函数中events的种类和用法。 具体我把它分为:键盘事件,鼠标事件,input事件,还有一个是基础事件(例如:滚动,界面大小变化等等之类...

1876

扫码关注云+社区