JavaScript&JQuery
JavaScript
语言类型
- 脚本语言
- 解释性语言，边运行边解释
- 弱类型
标签
-
Script
-
type --- 可写可不写，声明标准和解析模式
<script type="text/javascript"> </script>
注释
- 单行注释 //
- 多行注释 /**/
显示
- document.write(xxx); 显示在页面上
- alert(xxx); 显示在弹窗(警告框)中
- prompt("xxx"); 显示在提示框(弹窗)中，并且获得输入值
- confirm("xxx"); 显示提示框，给予两个选择，获得选择值
- console.log(xxx); 控制台(F12 console)输出
<script type="text/javascript">
//页面显示
document.write("Hello World")
//弹窗(警告框)显示
alert("Hello World");
//弹窗显示，弹窗中文本框可输入内容，返回值为输入的内容
var text = prompt("Hello World");
document.write(text);
//弹窗显示，弹窗中可选择确认/取消，返回值为true/false
var choose = confirm("Hello World");
document.write(choose);
//网页控制台输出，F12查看
console.log("Hello World");
</script>
数据类型
- var
//用var类型预先不用知道变量的类型；根据你给变量赋值来判定变量属于什么类型
var name = "张三";
var age = 18;
var money = 18.1;
var sex = null;
var choice = false;
var address = undefined;
- string (小写)
- number (整型，浮点)
- boolean
- object
- null
- undefined (未定义类型)
//string
alert(typeof(name));
//number
alert(typeof(age));
//number
alert(typeof(money));
//object
alert(typeof(sex));
//boolean
alert(typeof(choice));
//undefined
alert(typeof(address));
类型转换
- Number.pareseInt (xxx) 转换整型类型
//显示 123
var num = "123abc";
//显示 1
var num = "1a2b3c";
//显示 NaN(即 not a number)
var num = "abc123";
//总结：Number.pareseInt(xxx) 能将值转换成整型类型，但是只能转换从首位开始到第一个非数字之前的所有数字
document.write(Number.parseInt(num));
- Number.pareseFloat (xxx) 转换浮点类型
//显示 1.23
var num = "1.23abc";
//显示 1.23
var num = "1.23.4abc";
//显示 1.1
var num = "1.1a2.2b3.3c";
//显示 NaN
var num = "abc1.23";
document.write(Number.pareseFloat(num));
//总结：Number.pareseFloat(xxx) 能将值转换成浮点类型，但是只能转换第一个小数点或不带小数点的开始到第一个非数字(第二个小数点)之前的所有数字
- Number(xxx) 转换数字类型
//显示 NaN
var num = "1.234abc";
//显示 NaN
var num = "1.23.4abc";
//显示 NaN
var num = "1.1a2.2b3.3c";
//显示 NaN
var num = "abc1.23";
//显示 NaN
var num = "123abc";
//显示 NaN
var num = "1.23abc";
//显示 NaN
var num = "1a2b3c";
//显示 NaN
var num = "1.1a2.2b3.3c";
//显示 NaN
var num = "abc123";
//显示 NaN
var num = "1.1a2.2b3.3c";
//显示 NaN
var num = "true";
//显示 1
var num = true;
//显示 NaN
var num = "false";
//显示 0
var num = false;
//显示 123
var num = "123";
//显示 1.23
var num = "1.23";
//显示 NaN
var num = "1.23.4";
document.write(Number(num));
//总结: Number（)能将值转化成Number类型，但是仅限于正确的数字或者true/false（boolean类型的)
- Boolean(xxx) 转换布尔类型
//显示 true
var bl = "1.234abc";
//显示 true
var bl = "1234abc";
//显示 true
var bl = "123";
//显示 true
var bl = "abc";
//显示 true
var bl = "0";
//显示 false
var bl = 0;
//显示 true
var bl = "null";
//显示 false
var bl = null;
//显示 true
var bl = "false";
//显示 false
var bl = false;
document.write(Boolean(bl));
//总结:除了0，null，false 其余全为true
本地对象
数组
定义
- 根据数组的构造方法创建对象
- 不需要定长
- 长度可以自动增加
var arr = new Array();
var arr = ["a","b","c"];
添加
- 直接添加
<script>
var arr = new Array();
arr[0] = 10;
arr[1] = "abc";
arr[10] = 2;
console.log(arr);
alert(arr.length);
</script>
- 根据方法添加
var arr = new Array();
//首部添加,只能添加一个
arr.unshift(10);
//首部删除,有返回值(返回被删除的值)
arr.shift();
//尾部添加
arr.push(12,5,6,31,7);
//尾部删除,有返回值(返回被删除的值)
arr.pop();
时间
var date = new Date();
//获取年份
document.write(date.getFullYear());
//获取月份(0~11)
document.write(date.getMonth());
//获得日期(1~31)
document.write(date.getDate());
//获得星期(0~6)
document.write(date.getDay());
//获得小时(0~23)
document.write(date.getHours());
//获得分钟(0~59)
document.write(date.getMinutes());
//获得秒数(0~59)
document.write(date.getSeconds());
//获得从1970年
document.write(date.getTime());
JSON
- JSON 易于理解
- JSON 是一种轻量级的数据交换格式
- JSON ---- JavaScript Object Notation JavaScript对象表示法
- JSON是独立的语言 ---- JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本文本可以被任何编程语言读取及作为数据格式传递
var json1 = {"name":"张三","sex":"男","age":18};
//添加对应信息
json1.id = 101;
//输出对应信息
alert(json1.name + json1.age);
var json2 = [{"name":"张三","sex":"男","age":18},{"name":"李四","sex":"女","age":20}];
//输出对应信息
alert(json2[0].name + json2[0].age);
分支语句
if - else
- 与java中一致
switch - case
- 与java中一致
循环语句
for
- 与java中一致
while
- 与java中一致
for - in
- 类似于foreach循环
- 将 java foreach 中的 : 换成了 in
for(xx in yy){
循环体;
}
函数
普通函数
- function 关键字
<script type="text/javascript">
//定义以及编写
function f0(){
alert("Hello World");
}
//执行
f0();
</script>
函数传参
- function f(xxx,yyy,zzz,....)
//数据类型var 可以省略不写 输入的值是什么类型，参数就为什么类型
function f1(id,name){
alert(id + name);
}
f1(1,"张三");
带返回值
- function f(...)
function f2(){
if(age > 12){
return ">";
}else{
return "<";
}
}
alert( f2(15) );
匿名函数
- var xxx = function(...)
- 匿名函数可以有效的保证在页面上写入Javascript，而不会造成全局变量的污染。
var f3 = function(){
alert("123");
}
f3();
var f4 = function f3(){
alert("123");
}
f4();
事件
- 通过HTML中按钮、输入框的各种属性进行对应的操作
单击事件
- onclick
<button onclick="test1">点一点</button>
<script>
function test1(){
alert("click" test);
}
</script>
双击事件
- ondbclick
<button ondbclick="test2">点一点</button>
<script>
function test2(){
alert("dbclick test");
}
</script>
失焦事件
- onblur
<input type="text" onblur="test3"/>
<script>
function test3(){
alert("onblur test");
}
</script>
聚焦事件
- onfocus
<input type="text" onfocus="test4"/>
<script>
function test4(){
alert("onfocus test");
}
</script>
按键抬起事件
- onkeyup
<input type="text" onkeyup="test5"/>
<script>
function test5(){
alert("onkeyup test");
}
</script>
按键按下事件
- onkeydown
<input type="text" onkeydown="test6"/>
<script>
function test6(){
alert("onkeydown test");
}
</script>
光标悬停事件
- onmouseover
<input type="text" onmouseover="test7"/>
<script>
function test7(){
alert("onmouseover test");
}
</script>
光标移开事件
- onmouseout
<input type="text" onmouseout="test8"/>
<script>
function test8(){
alert("onmouseout test");
}
</script>
数值改变事件
- onchange
<input type="text" onchange="test9"/>
<script>
function test9(){
alert("onchange test");
}
</script>
节点
通过id获取节点
- document.getElementById
姓名：<input type="test" id="username"/>
<button onclick="getName()">确认提交</button>
<script type="text/javascript">
function getName(){
//通过id获取节点
var name = document.getElementById("username");
//通过节点获取值 xxx.value
alert(name.value);
}
</script>
获取到标签的id后可以进一步获取标签的值、样式、属性等等，进而可以通过赋值等形式改变标签的值、属性、样式等内容
获取div标签文本
- 获取文本 ---- innerText
- 获取文本和标签 ---- innerHTML
<div id="testDiv">
<p>Hello</p>
</div>
<button onclick="getDiv()">确认提交</button>
<script type="text/javascript">
function getDiv(){
var div = document.getElementById("testDiv"); //通过id获取节点
//只显示 Hello
alert(div.innerText);
//显示 <p>Hello</p>
alert(div.innerHTML);
}
</script>
类似 input 标签的单标签使用 id 获取内容直接使用 .value；类似 div 标签的双标签使用 id 获取内容使用 innerText 只获取标签内的文本内容，使用 innerHTML 获取标签中的所有内容包括其中的 HTML语句。
更改div属性内容
以下为几种常用的使用id获取节点后更改div的属性
更改颜色
- 通过 style 属性调取 backgroundColor 改变颜色
<div id="div" style="background-color: #7CFC00;">
<table height="200px">
</table>
</div>
<button onclick="divtest()">变色</button>
<script type="text/javascript">
function divtest(){
var div = document.getElementById("div");
div.style.backgroundColor="red";
}
</script>
将上面代码改进一下，随机更换颜色
<div id="div" style="background-color: blue;">
<!-- table占位 -->
<table height="200px"></table>
</div>
<button onclick="divtest()">变色</button>
<script type="text/javascript">
function divtest(){
//获取div节点
var div = document.getElementById("div");
//制定随机颜色,可以通过另外一个函数进行颜色的制定与随机，可以做得更精细
var setColor = ["red","yellow","green","grew","pink","blue"];
//Math.random()*(max - min) + min 获取[min,max)区间内的随机数
var num = Math.random()*(6 - 0) + 0;
//更改颜色
div.style.backgroundColor=setColor[Number.parseInt(num)];
}
</script>
更改文本
- innerText 显示文本
- innerHTML 显示被HTML编译后的文本
<div id="div" width="200px" height="200px"></div>
<button onclick="divtest()">文字</button>
<script type="text/javascript">
function divtest(){
var div = document.getElementById("div");
//显示文本
div.innerText="Hello World";
//显示被HTML编译后的文本
div.innerHTML="<a href='www.baidu.com'>跳转百度</a>";
}
</script>
更改字体
- 通过 style 属性调取 fontFamily 改变字体
<div id="div" style="font-family: '微软雅黑'; font-size: 50px;">你好</div>
<button onclick="divtest()">更改字体</button>
<script type="text/javascript">
function divtest(){
var div = document.getElementById("div");
div.style.fontFamily="楷体";
}
</script>
获取下拉列表值
- 直接获取
- 获取 option 中指定的值
<select id="selectTest" onchange="select()">
<option>张三</option>
<option><p>李四</p></option>
<option value="t1">王五</option>
</select>
<script type="text/javascript">
function select(){
var getvalue = document.getElementById("selectTest");
alert(getvalue.value);
}
</script>
option 中未定义value属性时默认为返回其中的文本内容 ，定义了 value属性后返回value值
控制节点全选反选
全选
- 按钮方式实现
<!--全选全不选-->
<input type="checkbox" class="choose" value="c1">
<input type="checkbox" class="choose" value="c2">
<input type="checkbox" class="choose" value="c3">
<input type="checkbox" class="choose" value="c4">
<input type="checkbox" class="choose" value="c5">
<button onclick="judgeChoose()">全选/全不选</button>
<script>
function judgeChoose(){
//设置节点
var choose = document.getElementsByClassName("choose");
//设置判断条 0为全被选中 (0,choose.length)为有部分被选中 choose.length为全未被选择 默认全被选中
var judgeNum =0;
//进行循环判断
for (var i = 0; i < choose.length; i++) {
if(choose[i].checked != true){
judgeNum++;
}
}
if(judgeNum == 0){
//全被选中 ---- 全不选
setChoose(choose,false);
}else if(judgeNum == choose.length){
//全未被选中 ---- 全选
setChoose(choose,true);
}else{
//部分被选中 ---- 全选
setChoose(choose,true);
}
}
//进行选择
function setChoose(choose,judge){
for(var i = 0;i<choose.length;i++){
choose[i].checked = judge;
}
}
</script>
- 复选框方式实现
<input type="checkbox" class="choose" value="c1">
<input type="checkbox" class="choose" value="c2">
<input type="checkbox" class="choose" value="c3">
<input type="checkbox" class="choose" value="c4">
<input type="checkbox" class="choose" value="c5">
<input type="checkbox" class="choose" value="c5">
<button onclick="judgeChoose()">全选/全不选</button>
全选:<input type="checkbox" id="All" onclick="checkAll()">
<script>
//全选/全不选
function checkAll(){
//设置全选节点
var all = document.getElementById("All");
//设置复选框节点
var choose = document.getElementsByClassName("choose");
for(var i = 0;i<choose.length;i++){
choose[i].checked = all.checked;
}
}
//选项反向控制全选键
function checkchoose(){
//设置节点
var all = document.getElementById("All");
var choose = document.getElementsByClassName("choose");
//设置判断条 0为全被选中 (0,choose.length)为有部分被选中 choose.length为全未被选择 默认全被选中
var judgeNum =0;
//进行循环判断
for (var i = 0; i < choose.length; i++) {
if(choose[i].checked != true){
judgeNum++;
}
}
if(judgeNum == 0){
//全被选中 选中
all.checked = true;
}else{
//未被选中、部分被选中 不选
all.checked = false;
}
}
</script>
反选
<input type="checkbox" class="chec" value="c1">
<input type="checkbox" class="chec" value="c2">
<input type="checkbox" class="chec" value="c3">
<button onclick="choiseall()">反选</button>
<script>
function choiseall(){
var chec = document.getElementsByClassName("chec");
for (var i = 0; i < chec.length; i++) {
if(chec[i].checked == true){
chec[i].checked = false;
}else{
chec[i].checked = true;
}
}
}
</script>
模型
- BOM ---- 浏览器对象模型(browser object model) ---- window
- DOM ---- 文档对象模型(document object model) ---- document
浏览器对象模型
- 常用对象
- window --- BOM中核心
- history --- 历史记录
- location --- 跳转页面
- screen --- 获取屏幕信息
- navigator --- 获取浏览器信息
- document --- 文档对象
- 常用方法
- alert --- 警告框
- confirm --- 确认信息弹框（Y/N）
- prompt --- 输入信息弹框 (可以输入信息)
- open --- 打开
- close --- 关闭
- 常用事件
- onclick --- 单击事件
- onkeydown --- 键盘按下事件
- ......
//前进
window.history.forward();
window.history.go(1); //正整数前进，负数后退
//回退
window.history.back();
window.history.go(-1);
//跳转地址
window.location.href = "xxx.html";
//打开页面,有返回值（boolean）
var opening = window.open("xxx.html");
//关闭页面
opening.close("xxx.html");
//关闭浏览器
window.close();
文档对象模型
- DOM --- 文档对象模型(document object model)
- 获取文档中标签及其属性
获取节点
<ul id="getul" class="ul">
<li class="lili" name="username">张三</li>
<li class="lili" name="username">李四</li>
<li class="lili" name="username">王五</li>
<li class="lili" name="username">人六</li>
</ul>
<script>
//通过id获取节点 存入变量
var getul = document.getElementById("getul");
//通过class获取节点 存入数组 用下标调取
//注意使用的class名，若为ul、ol这种标签的class名,获取的值无法细分，即以ul/ol内所有内容为一段内容存入数组的一个下标内
//若使用它们旗下的li标签的class名则可以分别调取每个li标签的值
var ul = document.getElementsByClassName("ul");
document.write(ul[0].innerText); // 输出 : 张三 李四 王五 人六
var lili = document.getElementsByClassName("lili");
for(var i = 0; i < lili.length; i++){
document.write(lili[i].innerText + "<br/>"); //输出 : 张三 李四 王五 人六
}
//通过 标签名称 获取节点 存入数组 用下标调取
var li = document.getElementsByTagName("li");
for(var i = 0; i < li.length; i++){
document.write(li[i].innerText);
}
//通过name属性获取节点 存入数组 用下标调取
var username = document.getElementsByName("username");
for(var i = 0; i < username.length; i++){
document.write(username[i].innerText);
}
</script>
创建节点
<div id="div"></div>
<script>
//创建链接节点
var a = document.createElement("a");
//创建文本节点
var text = document.createTextNode("百度");
//二者结合
a.appendChild(text);
//放入块标签中
var div = document.getElementById("div");
div.appendChild(a);
//给链接节点添加链接
a.href="http://www.baidu.com";
</script>
删除节点
<ul id="getul">
<li name="lili">张三</li>
<li name="lili">李四</li>
<li name="lili">王五</li>
<li name="lili">人六</li>
</ul>
<button onclick="del()">删除</button>
<script>
function del(){
var getul = document.getElementById("getul");
var lili = document.getElementsByName("lili");
//正序删除
getul.removeChild(lili[0]);
//倒序删除
getul.removeChild(lili[lili.length - 1]);
}
</script>
复选框状态
<input type="checkbox" class="chec" value="c1">
<input type="checkbox" class="chec" value="c2">
<input type="checkbox" class="chec" value="c3">
<button onclick="choiseall()">全选/不选</button>
<script>
function choiseall(){
var chec = document.getElementsByClassName("chec");
for (var i = 0; i < chec.length; i++) {
if(chec[i].checked == true){
chec[i].checked = false;
}else{
chec[i].checked = true;
}
}
}
</script>
计时器
- setTimeout --- 执行一次
- setInterval --- 循环执行
通过计时器制作简单的定时追加列表
<ul id="u">
<li>a</li>
</ul>
<script>
//浏览器打开时开始执行代码
window.onload = function(){
//载入后延迟指定时间后,去执行一次表达式,只执行一次，这里因为有setInterval所以会一直执行
setTimeout("u()",1000);
//载入后,每隔指定的时间就执行一次表达式
setInterval("u()",1000);
}
function u(){
//创建 li 标签
var li = document.createElement("li");
//创建 li标签中显示内容
var text = document.createTextNode("a");
//获取节点
var ul = document.getElementById("u");
//将内容追加入li标签中
li.appendChild(text);
//将li标签追加入列表中
ul.appendChild(li);
}
</script>
通过计时器制作简单的变色效果
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
font-family: "楷体";
font-size: 50px;
}
</style>
</head>
<body>
<ul>
<li class="lili">零</li>
<li class="lili">壹</li>
<li class="lili">贰</li>
<li class="lili">叁</li>
<li class="lili">肆</li>
<li class="lili">伍</li>
<li class="lili">陆</li>
<li class="lili">柒</li>
<li class="lili">捌</li>
<li class="lili">玖</li>
</ul>
<script>
//计时器
window.onload = function(){
setInterval("changeColor()",100);
}
//定义变色位置变量
var x = 0;
//进行位置变动与颜色变换
function changeColor(){
changeI(x);
x++;
if(x==10){
x=0;
}
}
//变换颜色
function changeI(c){
var lili = document.getElementsByClassName("lili");
for (var i = 0; i < lili.length; i++) {
if(i == Number(c)){
//变换指定颜色
ctrlColor(i);
}else{
//重置颜色
lili[i].style.color = "black";
}
}
}
//颜色库
function ctrlColor(c){
var lili = document.getElementsByClassName("lili");
switch (Number(c)){
case 0:
lili[0].style.color = "#fe0000";
break;
case 1:
lili[1].style.color = "#ff3f42";
break;
case 2:
lili[2].style.color = "#ff7f40";
break;
case 3:
lili[3].style.color = "#ffbf41";
break;
case 4:
lili[4].style.color = "#ffff01";
break;
case 5:
lili[5].style.color = "#bfbf41";
break;
case 6:
lili[6].style.color = "#00be40";
break;
case 7:
lili[7].style.color = "#008083";
break;
case 8:
lili[8].style.color = "#0000fe";
break;
case 9:
lili[9].style.color = "#4100c1";
break;
default:
break;
}
}
</script>
</body>
</html>
jQuery
简介
- jQuery 是一个 JavaScript 库
- jQuery 极大地简化了 JavaScript 编程
<!--调用JQuery库-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script></script>
选择器
ID选择器
- $("#xxx")
<input type="text" id="test" value="123"/>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
//ID选择器取值
var data = $("#test").val();
alert(data);
</script>
类名选择器
- $(".xxx")
<input type="text" class="test" value="123"/>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
//类名选择器取值
var data = $("input").val();
alert(data);
</script>
标签选择器
- $("xxx")
<input type="text" value="123"/>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
//标签选择器取值
var data = $("input").val();
alert(data);
</script>
过滤选择器
<ul>
<li>零</li>
<li>壹</li>
<li>贰</li>
<li>叁</li>
<li>肆</li>
<li>伍</li>
<li>陆</li>
<li>柒</li>
<li>捌</li>
<li>玖</li>
</ul>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
//过滤选择器
$("li:first").css("color","red"); //首位变色
$("li:last").css("color","red"); //末位变色
$("li:even").css("color","red"); //偶数变色，索引以 0 开始
$("li:odd").css("color","red"); //奇数变色，索引以 0 开始
$("li:eq(2)").css("color","red"); //指定变色，索引以 0 开始
$("li:lt(2)").css("color","red"); //小于变色，索引以 0 开始，不包括选择值
$("li:gt(2)").css("color","red"); //大于变色，索引以 0 开始，不包括选择值
});
</script>
选择器间样式操作
<div id="d" class="d">
Hello World
<p>张三</p>
<p>李四</p>
<div><p>123</p></div>
</div>
<p class="pp" id="ming">小明</p>
<p class="qq" id="hong">小红</p>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
$("#d").css("color","yellow"); //id选择器
$(".d").css("color","deeppink"); //class选择器
$("div").css("color","aqua"); //标签选择器
$("*").css("color","green"); //通配符选择器
$("#d p").css("color","blue"); //id为d下的所有
$("#d>p").css("color","pink"); //id为d的子标签为p的p
$("#d+p").css("color","red"); //相邻选择器,离div最近的p标签
$("div~p").css("color","orange"); //兄弟选择器,与div同级的p标签
$("div,p").css("color","burlywood"); //并集选择器
$("p.pp#ming").css("color","purple"); //交集选择器
});
</script>
取值删值
取值
- 对 单标签 取值 --- .val()
- 对 双标签 取值 --- .text()
<div id="divTest" class="divTest">div值</div>
<input type="text" id="inputTest" class="inputTest" value="input值"/>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
//ID选择器取值
var divData = $("#divTest").text();
var inputData = $("#inputTest").val();
alert(inputData);
alert(divData);
//类名选择器取值
var divData = $(".divTest").text();
var inputData = $(".inputTest").val();
alert(inputData);
alert(divData);
//标签选择器取值
var divData = $("div").text();
var inputData = $("input").val();
alert(inputData);
alert(divData);
</script>
如果使用标签选择器时有多个相同标签时会怎样呢
<button>第一个button</button><br />
<button>第二个button</button><br />
<input type="button" value="第一个inputButton"/><br />
<input type="button" value="第二个inputButton"/><br />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
var inputData = $("input").val();
var buttonData = $("button").text();
alert(inputData);
alert(buttonData);
</script>
单标签只会取到第一个标签内的内容，双标签可以取值到所有内容
这是因为单标签使用value属性赋值，val()方法用于返回值时返回该方法第一个匹配元素的 value 属性的值；而text()方法会返回所有匹配元素的文本内容(不含Html语句)；如果使用html()方法则返回第一个匹配元素的内容
- val() https://www.runoob.com/jquery/html-val.html
- text() https://www.runoob.com/jquery/html-text.html
- html() https://www.runoob.com/jquery/html-html.html
如果就想用标签选择器选择第二个 input Button 怎么做呢
<button>第一个button</button><br />
<button>第二个button</button><br />
<input type="button" value="第一个inputButton"/><br />
<input type="button" value="第二个inputButton"/><br />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
var inputData = $("input:last").val();
var buttonData1 = $("button:first").text();
var buttonData2 = $("button:last").text();
alert(inputData);
alert(buttonData1);
alert(buttonData2);
</script>
通过过滤选择器的辅助可以取到下面的 input Button 框，也可以分开取出两个Button按钮中的值
赋值
- 对 单标签 赋值 --- .val("xxx")
- 对 双标签 赋值 --- .text("xxx")
<div id="divTest" class="divTest"></div>
<input type="text" id="inputTest" class="inputTest"/>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$("#divTest").text("div取值");
$("#inputTest").val("input取值");
</script>
注意，如果是打开页面就赋值，不能写在ready函数内
<div></div>
<div></div>
<input type="text"/>
<input type="text"/>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$("div").text("div赋值");
$("input").val("input赋值");
</script>
如果有多个相同标签，单独使用标签选择器赋值则会全部赋值、重写(html()方法)
<div></div>
<div></div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$("div:first").text("第一个div赋值");
$("div:last").text("第二个div赋值");
</script>
如果使用过滤选择器则可以实现赋值不同内容
删值
- empty() ---- 保存当前标签，删除该标签下的内容，对属性无效（value）
- remove() ---- 将标签及其内容全部删除
<button style="width: 50px; height: 20px;">first</button>
<button style="width: 50px; height: 20px;">second</button>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$("button:first").empty();
$("button:last").remove();
</script>
全局加载
- ready() 函数规定当 ready 事件发生时执行的代码
- ready() 函数仅能用于当前文档，因此无需选择器
- ready() 函数不应与 body onload="" 一起使用。
- 当 DOM（文档对象模型) 已经加载，并且页面(包括图像)已经完全呈现时，会发生 ready 事件
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
...
});
</script>
ready是jQuery的文档就绪函数，它用于防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败,使用此加载可以防止一些JQuery代码失效问题
单机方法
<div id="divtest">Hello Word</div>
<button id="btn_show">显示</button>
<button id="btn_hide">隐藏</button>
<button id="btn_showAndHide">显示/隐藏</button>
<button id="btn_in">淡入</button>
<button id="btn_out">淡出</button>
<button id="btn_inAndOut">淡入/淡出</button>
<button id="btn_up">上划</button>
<button id="btn_down">下划</button>
<button id="btn_upAndDown">上划/下划</button>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$("#btn_show").click(function(){
$("#divtest").show();//显示
});
$("#btn_hide").click(function(){
$("#divtest").hide();//隐藏
});
$("#btn_showAndHide").click(function(){
$("#divtest").toggle();//显示/隐藏
});
$("#btn_in").click(function(){
$("#divtest").fadeIn();//淡入
});
$("#btn_out").click(function(){
$("#divtest").fadeOut();//淡出
});
$("#btn_inAndOut").click(function(){
$("#divtest").fadeToggle();//淡入/淡出
});
$("#btn_up").click(function(){
$("#divtest").slideUp();//上划
});
$("#btn_down").click(function(){
$("#divtest").slideDown();//下划
});
$("#btn_upAndDown").click(function(){
$("#divtest").slideToggle();//上划/下划
});
</script>
属性设置
attr()
- 返回属性值使用时 --- 返回第一个匹配元素的值
<img src="img/test.jpg"/>
<button>大小</button>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("img").attr("width"));
alert($("img").attr("height"));
});
});
</script>
- 设置属性值使用时 --- 匹配元素设置一个或多个属性/值对
<img src="img/test.jpg"/>
<button>大小</button>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$("button").click(function(){
//$("img").attr({"width","500"});
//$("img").attr({"height","500"});
$("img").attr({"width":"500","height":"500"});
alert($("img").attr("width"));
alert($("img").attr("height"));
});
</script>
prop()
- 返回属性值使用时 --- 返回第一个匹配元素的值
<img src="img/test.jpg"/>
<button>大小</button>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("img").prop("width"));
alert($("img").prop("height"));
});
});
</script>
- 设置属性值使用时 --- 匹配元素设置一个或多个属性/值对
<img src="img/test.jpg"/>
<button>大小</button>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$("button").click(function(){
//$("img").prop({"width","500"});
//$("img").prop({"height","500"});
$("img").prop({"width":"500","height":"500"});
alert($("img").prop("width"));
alert($("img").prop("height"));
});
</script>
比较 attr/prop
- 复选框差异 attr --- prop : (checked/undefined) --- (true/false)
- attr可以取得自定义和本身已经定义好的属性
- prop只能取已经定义好的，自定义属性undefined
按钮不可用
<button id="btn">点一点</button>
<script>
$("#btn").attr("disabled","disabled");
$("#btn").attr("disabled",true);
$("#btn").attr("disabled",false);
$("#btn").prop("disabled","disabled");
$("#btn").prop("disabled",true);
$("#btn").prop("disabled",false);
</script>
浙公网安备 33010602011771号