文章目录
初识jQuery
jQuery其实就是javascript的一个库,通过引入使用
JS:此类get查询必须在页面加载完之后才能进行查询,比如在load事件中可以查询,也可以在触发事件后进行查询,但是未加载的时候直接查询是不行的。
JQ:当$()中是个函数的时候相当于win.load加载函数,从而可以在加载函数中进行get查询。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./jquery-3.5.1.min.js">
</script>
<script type="text/javascript">
//当$()中是个函数的时候相当于win.load加载函数
$(function () {
alert($)//$符号是一个函数的缩写
var $btnid = $("#btnid")
$btnid.click(function () {
alert("HelloWorld")
})
//当$()中是个标签的时候,用于加载标签
$("<div>\n" +
" <span>运用$添加标签</span>\n" +
"</div>").appendTo("body");
// $("#id属性值") id选择器,根据id查询标签对象
// $("标签名") 标签名选择器,根据指定的标签名查询标签对象
// $(".class属性值") 类型选择器,可以根据class属性查询标签对象
var btn = $("button")
alert(btn.length)
// 组合选择器,将符合任意一个选择器条件的加入数组
var jqlist = $("button,span")
for (var i = 0; i < jqlist.length; i++)
alert(jqlist[i])
alert("组合选择器提取的标签个数" + jqlist.length)
//$(dom对象)会转化为jQuery对象
var btnobj = document.getElementById("btn1")
alert('dom对象' + btnobj + "jQuery对象" + $(btnobj))
});
</script>
</head>
<body>
<button id="btnid">sayhello</button>
<br>
<button id="btn1">1</button>
<button>2</button>
<button>3</button>
<span></span>
</body>
</html>
jQuery对象和dom对象的区别
jQuery对象本质就是dom数组+jQuery提供的一系列功能函数
比如,使用$("#id")查询的jQuery对象可以通过jq[0]来转化为dom对象。
注意
jQuery对象不能使用dom的方法,同样dom也不能使用jQuery的方法
基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.two {
color: green;
}
</style>
<script src="jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// JQ对象可以改变css样式
$("#btn1").click(function () {
// 将查找到的div标签换一下css样式,方便观察
$("#none").css("background-color", "red");
});
$("#btn2").click(function () {
$(".two").css("background-color", "red")
})
$("#btn3").click(function () {
$("div").css("background-color", "black")
})
$("#btn4").click(function () {
$("*").css("background-color", "yellow")
})
$("#btn5").click(function () {
$("span,div").css("background-color", "black")
})
})
</script>
</head>
<body>
<button id="btn1">查找id为none的标签</button>
<button id="btn2">查找class为two的标签</button>
<button id="btn3">查找div标签</button>
<button id="btn4">查找所有标签包括body等</button>
<button id="btn5">查找所有span和div标签</button>
<div id="none">
id为none的div标签
</div>
<div class="two">class为two的div标签</div>
<span>span标签</span>
</body>
</html>
层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.two {
color: green;
}
</style>
<script src="jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// JQ对象可以改变css样式
$("#btn1").click(function () {
// 将查找到的div标签换一下css样式,方便观察
$("body div").css("background-color", "red");
});
$("#btn2").click(function () {
$("body > div").css("background-color", "red")
})
$("#btn3").click(function () {
$("button+div").css("background-color", "black")
})
$("#btn4").click(function () {
$("button~div").css("background-color", "yellow")
})
$("#btn5").click(function () {
$("#none+div").css("background-color", "black")
})
})
</script>
</head>
<body>
<button id="btn1">选择body内的所有div标签</button>
<button id="btn2">选择body中的div子元素</button>
<button id="btn3">选择button后紧跟的div的标签</button>
<button id="btn4">选择button后的多个div标签</button>
<button id="btn5">选择id为none的下一个div标签</button>
<div id="none">
id为none的div标签
</div>
<label>-----------------------------我是label分割线-------------------------------------</label>
<div class="two">class为two的div标签</div>
<span><div>我是span里面的标签$("body > div")找不到我</div></span>
</body>
</html>
表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引用标签不能编写代码-->
<script type="text/javascript" src="jquery-3.5.1.min.js">
</script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//val是jQ表单的取值和赋值方法
$(":text:enabled").val("改变了可用文本框的内容")
})
$("#btn2").click(function () {
//val是jQ表单的取值和赋值方法
$(":text:disabled").val("改变了不可用文本框的内容")
})
$("#btn3").click(function () {
//each是jQ对象提供用来遍历的方法
$(":checkbox:checked").each(function () {
alert(this.value)
})
})
$("#btn4").click(function () {
//each是jQ对象提供用来遍历的方法
$("select option:checked").each(function () {
alert(this.value)
})
})
})
</script>
</head>
<body>
<form>
<br>
<input type="text" value="可用text文本"><br>
<input type="text" disabled="disabled" value="不可用text文本"><br>
<input type="text" value="可用text文本"><br>
<input type="text" disabled="disabled" value="不可用text文本"><br>
<input type="checkbox" value="text1">text1
<input type="checkbox" value="text2">text2
<input type="checkbox" value="text3">text3
<input type="checkbox" value="text4">text4
<input type="checkbox" value="text5">text5<br>
<select>
<option selected="selected">中国</option>
<option>日本</option>
<option>美国</option>
<option>意大利</option>
</select>
</form>
<button id="btn1">改变可用文本框内容</button>
<button id="btn2">改变不可用文本框内容</button>
<button id="btn3">查看复选框选中内容</button>
<button id="btn4">查看下拉框选中内容</button>
</body>
</html>
jQ基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//传递参数是设置,不传参数是取值
alert($("div").html());
$("div").html("<h1>html设置div标签</h1>")
alert($("div").text());
$("div").text("<h1>text只能设置文本</h1>")
$("#btn").click(function () {
alert($("#username").val())
})
})
</script>
</head>
<body>
<div>我是div标签<span>我是div里面的span标签</span></div>
<input type="text" id="username" name="username">
<button id="btn">val操作表单标签</button>
</body>
</html>
jQ语法的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 通过value值进行操作
// value可以作为默认值并且作用和name类似可以进行val识别
// $(":radio").val(["radio1"])
// $(":checkbox").val(["checkbox1", "checkbox4", "checkbox2"])
// $("#mul").val(["mul1", "mul3", "mul5"])
// $("#mul1").val(["sin5"])
// 等价操作
$(":radio,:checkbox,#mul,#mul1").val(["radio1", "checkbox1", "checkbox4", "checkbox2", "mul1", "mul3", "sin5"])
// 注意事项:option标签中value属性不会作为默认值,但是在大多数标签中是可以作为默认值或者名字
})
</script>
</head>
<body>
<input type="radio" name="radio" value="radio1">男
<input type="radio" name="radio" value="radio2">女<br>
<input type="checkbox" name="checkbox" value="checkbox1">check1
<input type="checkbox" name="checkbox" value="checkbox2">check2
<input type="checkbox" name="checkbox" value="checkbox3">check3
<input type="checkbox" name="checkbox" value="checkbox4">check4
<br>
<select multiple="multiple" id="mul">
<option value="mul1">中国</option>
<option value="mul2">美国</option>
<option value="mul3">日国</option>
<option value="mul4">澳大利亚</option>
<option value="mul5">俄罗斯</option>
</select>
<br><br>
<select id="mul1">
<option value="sin1">中国</option>
<option value="sin2">美国</option>
<option value="sin3">日国</option>
<option value="sin4">澳大利亚</option>
<option value="sin5">俄罗斯</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 通过value值进行操作
// value可以作为默认值并且作用和name类似可以进行val识别
// $(":radio").val(["radio1"])
// $(":checkbox").val(["checkbox1", "checkbox4", "checkbox2"])
// $("#mul").val(["mul1", "mul3", "mul5"])
// $("#mul1").val(["sin5"])
// 等价操作
//$(":radio,:checkbox,#mul,#mul1").val(["radio1", "checkbox1", "checkbox4", "checkbox2", "mul1", "mul3", "sin5"])
// 注意事项:option标签中value属性不会作为默认值,但是在大多数标签中是可以作为默认值或者名字
$(":checkbox:first").attr("name", "check1")
alert($(":checkbox:first").attr("name"))// 返回对应的值
$(":checkbox:first").prop("name", "check1")
alert($(":checkbox:first").prop("name"))//返回对应的值
alert($(":checkbox:first").attr("checked"))// 返回对应的值,undifined
alert($(":checkbox:first").prop("checked"))//返回true或false
// 设置自己的属性
$(":checkbox:first").prop("try", "successful")
alert($(":checkbox:first").prop("try"))
})
</script>
</head>
<body>
<input type="radio" name="radio" value="radio1">男
<input type="radio" name="radio" value="radio2">女<br>
<input type="checkbox" name="checkbox" value="checkbox1">check1
<input type="checkbox" name="checkbox" value="checkbox2">check2
<input type="checkbox" name="checkbox" value="checkbox3">check3
<input type="checkbox" name="checkbox" value="checkbox4">check4
<br>
<select multiple="multiple" id="mul">
<option value="mul1">中国</option>
<option value="mul2">美国</option>
<option value="mul3">日国</option>
<option value="mul4">澳大利亚</option>
<option value="mul5">俄罗斯</option>
</select>
<br><br>
<select id="mul1">
<option value="sin1">中国</option>
<option value="sin2">美国</option>
<option value="sin3">日国</option>
<option value="sin4">澳大利亚</option>
<option value="sin5">俄罗斯</option>
</select>
</body>
</html>
全选反选全不选操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#checkAllbtn").click(function () {
$(":checkbox").prop("checked", true)
})
$("#NoCheckAllbtn").click(function () {
$(":checkbox").prop("checked", false)
})
$("#CheckReversebtn").click(function () {
$(":checkbox[name='items']").each(function () {
this.checked = !this.checked
})
var allcheck = $(":checkbox[name='items']").length
var all = $(":checkbox[name='items']:checked").length
// if(all==allcheck)
// $("#checkAllBox").prop("checked","true")
$("#checkAllBox").prop("checked", all == allcheck)
})
$("#submitbtn").click(function () {
$(":checkbox[name='items']").each(function () {
if (this.checked)
alert(this.value)
})
})
$("#checkAllBox").click(function () {
$(":checkbox[name='items']").prop("checked", this.checked)
})
// 对于多个相同属性的标签设置事件
$(":checkbox[name='items']").click(function () {
var all = $(":checkbox[name='items']").length
var allcheck = $(":checkbox[name='items']:checked").length
$("#checkAllBox").prop("checked", all == allcheck)
})
})
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkAllBox"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="蓝球"/>篮球
<input type="checkbox" name="items" value="乒乓球"/>兵乓球
<input type="checkbox" name="items" value="巧固球"/>巧固球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<br>
</form>
<button id="checkAllbtn">全选</button>
<button id="NoCheckAllbtn">全不选</button>
<button id="CheckReversebtn">反选</button>
<button id="submitbtn">提交</button>
</body>
</html>
jQ的增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function (newChild, refChild) {
// 在div标签内部插入标签
$("<h2>我是appendTo的标题</h2>").appendTo("div")
$("<h2>我是prependTo的标题</h2>").prependTo("div")
// 在div标签外部插入标签
$("<h2>我是insertAfter的标题,插在每个div标签后面</h2>").insertAfter("div")
$("<h2>我是insertBefore的标题,插在每个div标签前面</h2>").insertBefore($("div"), refChild)
// 改变标签
$("div").replaceWith("<h2>我是replaceWith的标题</h2>")
$("<h2>我是replaceAll的标题</h2>").replaceAll("div")
// 删除标签或者删除标签内容
$("button").remove()
$("span").empty()
})
</script>
</head>
<body>
<div>
我是第一个div标签
</div>
<div>
我是第二个div标签
</div>
<button>我是被删除的按钮,应该没人看见我,我就多写几行练练打字</button>
<span style="background-color: aquamarine">我是内容应该也没人看的见,我多写几行练练打字</span>
</body>
</html>
appendTo应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 将上边选中的option移动到下面
$("button:eq(0)").click(function () {
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
})
// 将上面全部option移动到下面
$("button:eq(1)").click(function () {
$("#left option").appendTo($("select:eq(1)"));
})
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
})
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"));
})
})
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel1">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3">option3</option>
<option value="opt4">option4</option>
<option value="opt5">option5</option>
<option value="opt6">option6</option>
</select>
<button>选中添加到下边</button>
<button>全部添加到下边</button>
</button>
</div>
<div id="right">
<select multiple="multiple" name="sel2">
</select>
<button>选中的删除到上边</button>
<button>全部删除到上边</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 添加行
$("#addEmp").click(function () {
var name = $("#empName").val()
var email = $("#empemail").val()
var salary = $("#empsalary").val()
var trow = $(" <tr>\n" +
" <td>" + name + "</td>\n" +
" <td>" + email + "</td>\n" +
" <td>" + salary + "</td>\n" +
" <td><a href=\"deleteEmp?id-001\">delete</a></td>\n" +
" </tr>")
trow.appendTo($("#employeeTable"))
trow.find("a").click(function () {
var rname = trow.find("td:first").text()
if (confirm("确定要删除" + rname + "?")) { // 取到行对象,然后删除
trow.remove();
}
return false;
})
})
// 当页面加载触发后,只是绑定了三个a标签
$("a").click(function () {
// this是当前正在响应事件的dom对象
var row = $(this).parent().parent()
var rname = row.find("td:first").text()
if (confirm("确定要删除" + rname + "?")) { // 取到行对象,然后删除
row.remove();
}
return false;
})
})
</script>
</head>
<body>
<table id="employeeTable" border="1px" align="center">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id-001">delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@tom.com</td>
<td>8000</td>
<td><a href="deleteEmp?id-002">delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>Bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id-003">delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4 align="center">添加新员工</h4>
<table align="center">
<tr>
<td>
name:
</td>
<td>
<input type="text" id="empName">
</td>
</tr>
<tr>
<td>
email:
</td>
<td>
<input type="text" id="empemail">
</td>
</tr>
<tr>
<td>
salary:
</td>
<td>
<input type="text" id="empsalary">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmp">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 100px;
height: 255px;
}
/*加上div的原因是限制样式只给div标签使用*/
div.whiteborder {
border: 2px white solid
}
div.redDiv {
background-color: red;
}
div.blueBorder {
border: 5px blue solid;
}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
var $divEle = $("div:first")
$("#btn1").click(function () {
$divEle.addClass('redDiv blueBorder')
})
$("#btn2").click(function () {
$divEle.removeClass('blueBorder')
})
$("#btn3").click(function () {
$divEle.toggleClass('redDiv')
})
$("#btn4").click(function () {
var post = $divEle.offset()
console.log(post)
$divEle.offset({
top: 100,
left: 50
})
})
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div>
<input type="button" value="addClass()" id="btn1">
<input type="button" value="removeClass()" id="btn2">
<input type="button" value="toggleClass()" id="btn3">
<input type="button" value="offset()" id="btn4">
</div>
</td>
</tr>
</table>
</body>
</html>
jQuery动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.min.js"></script>
<style type="text/css">
div {
width: 100px;
height: 255px;
}
/*加上div的原因是限制样式只给div标签使用*/
div.whiteborder {
border: 2px white solid
}
div.redDiv {
background-color: red;
}
div.blueBorder {
border: 5px blue solid;
}
</style>
<script type="text/javascript">
$(function () {
var cdiv = $("div")
var cimg = $("img")
// 第二个参数是回调函数
// function cartoon(){
// cdiv.toggle(1000,cartoon)
// }
// cartoon();
$("#btn1").click(function () {
// 可以控制动画显示时间
cdiv.show(1000)
cimg.show(1000)
})
$("#btn2").click(function () {
cdiv.hide(1000)
cimg.hide(1000)
})
$("#btn3").click(function () {
cdiv.fadeIn(1000)
cimg.fadeIn(1000)
})
$("#btn4").click(function () {
cdiv.fadeOut(1000)
cimg.fadeOut(1000)
})
$("#btn5").click(function () {
cdiv.fadeTo(1000, 0.5)
cimg.fadeTo(1000, 0.5, function () {
alert("淡化完成")
})
})
$("#btn6").click(function () {
cdiv.fadeToggle(1000)
cimg.fadeToggle(1000)
})
$("#btn7").click(function () {
cdiv.toggle(1000)
cimg.toggle(1000)
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<button id="btn1">显示show</button>
</td>
<td rowspan="7">
<div class="blueBorder">
我是动画
</div>
</td>
</tr>
<tr>
<td>
<button id="btn2">隐藏hide</button>
</td>
</tr>
<tr>
<td>
<button id="btn3">淡入fadeIn</button>
</td>
</tr>
<tr>
<td>
<button id="btn4">淡出fadeOut</button>
</td>
</tr>
<tr>
<td>
<button id="btn5">淡化到fadeTo</button>
</td>
</tr>
<tr>
<td>
<button id="btn6">淡化切换到fadeToggle</button>
</td>
</tr>
<tr>
<td>
<button id="btn7">显示/隐藏切换toggle</button>
</td>
</tr>
</table>
<img src="screen.jpg" height="1080" width="1919"/>
</body>
</html>
jQ动画应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.min.js"></script>
<style type="text/css">
.hightcolor {
color: #F50;
}
</style>
<script type="text/javascript">
$(function () {
$("li:gt(5):not(:last)").hide();
$("#more").click(function () {
$("li:gt(5):not(:last)").toggle();
// 判断是否是隐藏
if (!$("li:gt(5):not(:last)").is(":hidden")) {
$("a span").html("<img src=\"向上箭头.png\" height=\"16\" width=\"16\"/>显示精简品牌");
$("li:contains('快播')").addClass("hightcolor")
} else {
$("a span").html("<img src=\"向下箭头.png\" height=\"16\" width=\"16\"/>显示全部品牌");
$("li:contains('快播')").removeClass("hightcolor")
}
return false;
})
})
</script>
</head>
<body>
<ul>
<li><a href="#">prohub</a></li>
<li><a href="#">github</a></li>
<li><a href="#">bilibili</a></li>
<li><a href="#">tencent</a></li>
<li><a href="#">taobao</a></li>
<li><a href="#">爱奇艺</a></li>
<li><a href="#">快播</a></li>
<li><a href="#">优酷</a></li>
<li><a href="#">暴风影音</a></li>
<li><a href="#">腾讯视频</a></li>
<li><a href="#">其他</a></li>
</ul>
<a href="more.html" id="more"><span><img src="向下箭头.png" height="16" width="16"/>显示全部品牌</span></a>
</body>
</html>
jQ事件操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
window.onload = function () {
alert("原生js页面加载完成之后---1")
}
window.onload = function () {
alert("原生js页面加载完成之后---2")
}
window.onload = function () {
alert("原生js页面加载完成之后---3")
}
$(function () {
alert("jquery的页面加载完成之后--1")
})
$(function () {
alert("jquery的页面加载完成之后--2")
})
$(function () {
alert("jquery的页面加载完成之后--3")
})
</script>
</head>
<body>
<button>我是按钮</button>
<iframe src="http://www.baidu.com"></iframe>
<img src="screen.jpg" height="1080" width="1919"/></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件操作</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#H5").live("click", function () {
console.log("live绑定的单击事件")
})
$('<h5>jQuery事件</h5>').appendTo($("#H5"))
// // 鼠标移入事件
// $("h5").mouseover(function () {
// console.log("你进来了")
// })
// // 鼠标移出事件
// $("h5").mouseout(function () {
// console.log("你出来了")
// })
// // bind绑定多个事件
// $("h5").bind("click mouseover mouseout",function () {
// console.log("bind绑定的事件")
// })
// // 作用类似bind但是只能使用一次
// // 这里为什么是传递字符串代表事件,因为如果是关键字或者值的话还要处理顺序,增加了库函数的繁杂度
// $("h5").one("click mouseover mouseout",function () {
// console.log("one绑定的事件")
// })
// // unbind解绑事件
// $("h5").unbind("click")
})
</script>
</head>
<body>
<h5 id="H5">jQuery事件</h5>
</body>
</html>
jQ事件event
对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
document.getElementById("R").click(function (event) {
console.log(event)
})
}
$(function () {
$("#G").click(function (event) {
console.log(event)
})
$("#G").bind("click mouseover", function (event) {
if (event.type == "mouseover")
console.log("事件移入")
else console.log("事件点击")
})
})
</script>
</head>
<body>
<div style="color:red" id="R">我是红色的</div>
<div style="color:green" id="G">我是绿色的</div>
</body>
</html>
图片跟随
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#small").bind("mousemove mouseover mouseout", function (event) {
if (event.type == "mouseover")
$("#big").show();
else if (event.type == "mouseout")
$("#big").hide();
else if (event.type == "mousemove")
$("#big").offset({
//这里注意坐标的使用,防止出现图片闪烁情况,若不修改坐标图片出现的时候运行mouseout事件
left: event.pageX + 10,
top: event.pageY + 10
});
});
})
</script>
</head>
<body>
<img id="small" src="screen.jpg" height="100" width="200"/>
<img id="big" src="screen.jpg" height="1080" width="1919"/>
</body>
</html>
注意
在form里面最好不要用button标签,因为button标签一旦触发就会产生提交效果,导致页面刷新从而使操作效果一闪而过。
option标签中value属性不会作为默认值,但是在大多数标签中是可以作为默认值或者名字
value可以作为默认值并且作用和name类似可以进行val识别