没有合适的资源？快使用搜索试试~ 我知道了~

文库首页安全技术网络安全04_尚硅谷_jQuery_王振国 - 课堂笔记1

04_尚硅谷_jQuery_王振国 - 课堂笔记1

需积分: 0 1 下载量 56 浏览量 2022-08-03 21:21:03 上传评论收藏 667KB PDF 举报

温馨提示

试读

18页

04_尚硅谷_jQuery_王振国 - 课堂笔记1

资源详情

资源评论

资源推荐

04-jQuery

讲师：王振国

今日任务

1.jQuery

的属性操作

2.jQuery

练习

3.jQuery CSS

样式操作

4.jQuery

动画操作

5.jQuery

事件操作

课堂笔记

今天课程内容：

1、jQuery 的属性操作

jQuery 属性操作

html() 它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。

text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。

val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样

val 方法同时设置多个表单项的选中状态：

<!DOCTYPE html>

<head>

<title>Title</title>

$(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>

</head>

<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>

<br/>

下拉单选：

</select>

</body>

</html>

attr()

可以设置和获取属性的值，不推荐操作

checked

、

readOnly

、

selected

、

disabled

等等

attr

方法还可以操作非标准的属性。比如自定义属性：

abc,bbj

prop()

可以设置和获取属性的值

只推荐操作

checked

、

readOnly

、

selected

、

disabled

等等

2、jQuery 练习

2.全选，全不选，反选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

$(function(){

给全选绑定单击事件

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

$(":checkbox").prop("checked",true);

});

给全不选绑定单击事件

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

$(":checkbox").prop("checked",false);

});

反选单击事件

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

查询全部的球类的复选框

$(":checkbox[name='items']").each(function () {

在

each

遍历的

function

函数中，有一个

this

对象。这个

this

对象是当前正在遍历到的

dom

对象

this.checked = !this.checked;

});

要检查是否满选

获取全部的球类个数

var allCount = $(":checkbox[name='items']").length;

再获取选中的球类个数

var checkedCount = $(":checkbox[name='items']:checked").length;

// if (allCount == checkedCount) {

// $("#checkedAllBox").prop("checked",true);

// } else {

// $("#checkedAllBox").prop("checked",false);

// }

$("#checkedAllBox").prop("checked",allCount == checkedCount);

});

【提交】按钮单击事件

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

获取选中的球类的复选框

$(":checkbox[name='items']:checked").each(function () {

alert(this.value);

});

给【全选

全不选】绑定单击事件

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

在事件的

function

函数中，有一个

this

对象，这个

this

对象是当前正在响应事件的

dom

对象

// alert(this.checked);

$(":checkbox[name='items']").prop("checked",this.checked);

});

给全部球类绑定单击事件

$(":checkbox[name='items']").click(function () {

要检查是否满选

获取全部的球类个数

var allCount = $(":checkbox[name='items']").length;

再获取选中的球类个数

var checkedCount = $(":checkbox[name='items']:checked").length;

$("#checkedAllBox").prop("checked",allCount == checkedCount);

});

剩余17页未读，继续阅读

内容反馈

书看不完了

粉丝: 19
资源: 364

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

04_尚硅谷_jQuery_王振国 - 课堂笔记1

评论0

最新资源

04_尚硅谷_jQuery_王振国 - 课堂笔记1

评论0

04_尚硅谷_书城项目_第一阶段_王振国 - 课堂笔记.pdf

04_尚硅谷_书城项目_分页_王振国 - 课堂笔记1

尚硅谷Spring Boot课堂笔记.rar

01__html&CSS_王振国 - 课堂笔记.pdf

14_尚硅谷_书城项目_第六、七阶段_王振国 - 课堂笔记1

07_尚硅谷_Servlet_王振国 - 课堂笔记1

15_尚硅谷_Filter过滤器_王振国 - 课堂笔记1

14_尚硅谷_Cookie&Session_王振国 - 课堂笔记1

06_尚硅谷_Servlet_王振国 - 课堂笔记1

尚硅谷-JavaSE课堂笔记.md

03_尚硅谷_书城项目-第三阶段代码优化_王振国 - 课堂笔记1

09_尚硅谷_文件的上传和下载_王振国 - 课堂笔记1

08_尚硅谷_jsp_王振国 - 课堂笔记1

10_尚硅谷_书城项目-第三阶段代码优化_王振国 - 课堂笔记1

16_尚硅谷_JSON、Aajx、i18n_王振国 - 课堂笔记1

09_尚硅谷_EL表达式&JSTL标签库_王振国 - 课堂笔记.pdf

jQuery表单课堂笔记

硅谷课堂-智慧星球-尚硅谷项目笔记和代码 2022年

书城项目代码（全）

网上书城.pdf

利用空间电荷限制电流方法计算MoO3:CBP的空穴迁移率

微电解法处理苯酚废水的研究

最新版ISO/IEC 27001:2022、ISO 27002:2022中英文合集

Goby红队版-win-x64-2.4.7版本

Chrome Header Editor 插件

ISO SAE 21434-2021 中文版.pdf

最新资源