第三章：JQuery

3.6JQuery的属性操作

JQuery属性操作：
1、 html() 它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样；
2、 text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样；
3、 val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样；
4、 attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等，attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj（注意：当输入一个参数的时候表示查询这个属性的值，当传入两个参数的时候，表示设置这个属性的值。除此之外，使用attr还可以给标签自定义属性，并设置属性的值）；
5、 prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等（注意：prop方法与attr方法是一个互补的关系）。

1.   <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.      <meta charset="UTF-8">
5.      <title>001jQuery的属性操作.html</title>
6.
7.      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
8.
9.      <script type="text/javascript">
10.         /**
11.          * 使用jQuery进行批量的操作
12.          */
13.
14.         //操作选中的单选
15.         $(function () {//在页面完成加载之后
16.             //首先要查询到单选
17.             $(":radio").val(["radio1"]);//操作选中指定的单选框
18.         });
19.
20.         //批量操作多选框
21.         $(function () {
22.             $(":checkbox").val(["checkbox1", "checkbox2", "checkbox3"]);
23.         });
24.
25.         //批量操作多选的下拉框
26.         $(function () {
27.             $("#multiple").val(["mul1", "mul2", "mul3", "mul4"]);
28.         });
29.
30.         //批量操作但徐昂框的选中状态
31.         $(function () {
32.             $("#single").val(["sin3"]);
33.         })
34.     </script>
35. </head>
36. <body>
37. 单选：
38. <input name="radio" type="radio" value="radio1"/>radio1
39. <input name="radio" type="radio" value="radio2"/>radio2
40. <br/>
41. 多选：
42. <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
43. <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
44. <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
45. <br/>
46. 下拉多选 ：
47. <select id="multiple" multiple="multiple" size="4">
48.     <option value="mul1">mul1</option>
49.     <option value="mul2">mul2</option>
50.     <option value="mul3">mul3</option>
51.     <option value="mul4">mul4</option>
52. </select>
53. <br/>
54. 下拉单选 ：
55. <select id="single">
56.     <option value="sin1">sin1</option>
57.     <option value="sin2">sin2</option>
58.     <option value="sin3">sin3</option>
59. </select>
60. </body>
61. </html>

第三章：JQuery相关推荐

jQuery系列第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
第三章 jQuery
内容来源于蓝桥杯竞赛,自己根据这个题纲重新巩固下前端的知识第三章 jQuery 基本选择器元素选择器 <!DOCTYPE html> <html lang="en&qu ...
锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记第三章 jQuery中的DOM操作 jQuery中的事件事件绑定 bind方法合成事件 hover方法 toggle方法事件冒泡事件对象停止事件冒泡阻止默认行为 ...
“JavaScript patterns”中译本 - 《JavaScript 模式》第三章
第三章直接量和构造函数 JavaScript中的直接量模式更加简洁.富有表现力,且在定义对象时不容易出错.本章将对直接量展开讨论,包括对象.数组和正则表达式直接量,以及为什么要使用等价的内置构造器函 ...
从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
【前端】第三章 Vue
第三章 Vue 文章目录第三章 Vue 一.Vue 1.介绍 2.Vue 的 MVVM 模型一.Vue 1.介绍 Vue 是一套用于构建用户界面的渐进式框架.与其他大型框架不同的是,Vue 被设计 ...
【高校宿舍管理系统】第三章 Layui整合Axios
第三章 Layui整合Axios 提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第三章 Layui整合Axios 前言一.下 ...
jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
搭建asp会议签到系统第三章会议签到
搭建asp会议签到系统第一章账密登录第二章生成会议签到二维码第三章会议签到第四章会议统计第三章会议签到搭建asp会议签到系统前言一.制作checkin前端页面二.读取并展示 ...
开发一个简单网站--第三章:相知
第三章:相知 <12>.搜索用户search.php <13>.搜索用户后台getsearchdata.php <14>.搜索论坛(投票)fourum.php &l ...

第三章：JQuery

3.6JQuery的属性操作

第三章：JQuery相关推荐

最新文章

热门文章