文章目录
- 了解jquery中的$
- jquery对象
- jquery对象和dom对象转换
- 栗子
- bootstrap
- 失去焦点获取数据
- 点击事件传递数据
- 改变图片
- 页面间传值
- jquery代码创建页面
了解jquery中的$
在这个栗子中，我们有2个按钮，button2，button2，通过两种不同方式获取到它们的对象，点击它们，设置下面的div内容为111
<html lang="en">
<head>
......
<title>Document</title>
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
<script type="text/javascript">
function load(){
var btn1 = document.getElementById("btn1");
btn1.onclick = set1;
var btn2 = $("btn2");
btn2.onclick = set1;
}
function set1(){
var div1 = document.getElementById("div1");
div1.innerHTML = "111";
}
function $(id){
return document.getElementById(id);
}
window.onload = load;
</script>
</head>
<body>
<input type="button" id="btn1" value="button1"/>
<input type="button" id="btn2" value="button2"/>
<div id="div1"/>
</body>
</html>jquery对象
使用jquery，首先引入jquery，然后通过$找到页面中的div1，在页面加载完后改变div1内容，这个栗子中要注意的是jquery对象不能使用dom对象的属性
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function load(){
//通过$找到的对象是jquery对象
var $div1 = $("#div1");
//jquery对象不能使用dom对象的属性
//$div1.innerHTML = "222";
$div1.html("333");
}
//网页加载完后执行load
$(document).ready(load);
</script>jquery对象和dom对象转换
<html lang="en">
<head>
......
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function load(){
//dom对象不能使用jquery对象的函数
var div1 = document.getElementById("div1");
//把dom对象传为jquery对象
//jquery对象是一个数组
var $div1 = $(div1);
$div1.html("111");
//jquery对象转为dom对象
var $div2 = $("#div2");
//从数组中取出来就是一个dom对象
var div2 = $div2[0];
div2.innerHTML = "222";
}
$(document).ready(load);
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>栗子
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
font-size:15px;
color:white;
}
#nav{
width:100px;
height:30px;
background-color:#6495ED;
}
#detail{
width:100px;
height:100px;
background-color:#DDA0DD;
display:none;
}
</style>
<script src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav").bind("mousemove",function(){
$("#detail").slideDown();
});
$("#nav").bind("mouseleave",function(){
//如果是向下移动，不要隐藏detail
var pageY = event.pageY;
var top = $("#nav").position().top;
var height = $("#nav").height();
console.log("pageY="+pageY);
console.log("top="+top);
console.log("height="+height);
if(!(pageY - top > height)){
$("#detail").slideUp();
}
});
$("#detail").bind("mouseleave",function(){
$("#detail").slideUp();
});
//给导航添加点击事件
$("#nav").bind("click",function(event){
//pageY是单击的点的位置
console.log("event.pageY="+event.pageY);
//top是控件在网页中距顶部的位置
console.log("top="+$("#nav").position().top);
});
});
</script>
</head>
<body>
<div id="nav">手机</div>
<div id="detail">华为<br/>小米<br/>凉凉的锤子</div>
</body>
</html>bootstrap
做出以下效果
需要下载Bootstrap
在项目中引用jquery、bootstrap.js、bootstrap.css
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script>
function showContent(){
//创建1个div
var $div = $("<div>");
$div.html("hi");
$div.css({
"font-size":"23px",
"margin-top":"10px"
});
//把div放到content下
var $content = $(".content");
$content.append($div);
}
</script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="dropdown">
<button data-toggle="dropdown">添加</button>
<ul class="dropdown-menu">
<li><a href="javascript:;" onclick="showContent()">添加好友</a></li>
<li>删除好友</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>失去焦点获取数据
$(function(){
//网页加载后执行
$("#user_name").blur(checkUser);
});
function checkUser(){
var username = $("#user_name").val();
console.log(username);
}点击事件传递数据
<script type="text/javascript">
$(function(){
$("#ChinaButton").bind("click",{type:"China"},show);
$("#JapanButton").bind("click",{type:"Japan"},show);
});
function show(d){
window.alert("clicked "+d.data.type);
//找到所有div
var $alldiv = $("div");
for(var i=0;i<$alldiv.length;i++){
//div是dom对象
var div = $alldiv[i];
var divId = div.getAttribute("id");
console.log("id"+divId)
if(divId){
if(divId.indexOf("CartoonDiv")>=0){
var currentShowDiv = d.data.type + "CartoonDiv";
if(divId == currentShowDiv){
div.style.display = "block";
}else {
div.style.display = "none";
}
}
}
}
}
</script>
<button type="button" id="ChinaButton">国漫</button>
<button type="button" id="JapanButton">日漫</button>改变图片
$("#CartoonImg").attr("src","img/1.png");页面间传值
页面中有两个按钮，点击跳转list.html，同时向list.html传值
index.html
<a href="list.html?type=China&typeId=1"><button type="button" id="ChinaButton">国漫</button></a>
<a href="list.html?type=Japan&typeId=2"><button type="button" id="JapanButton">日漫</button></a>list.html
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
var type = "";
var typeId = "";
var url = location.search;
console.log(url);
//?type=China&typeId=1
//去掉?
if(url.indexOf("?")>=0){
url = url.substr(1);
}
var array = url.split("&")
for(var i=0;i<array.length;i++){
var name = array[i].split("=")[0];
if(name == "typeId"){
typeId = array[i].split("=")[1];
}
if(name == "type"){
type = array[i].split("=")[1];
}
}
console.log("type:"+type+" typeId:"+typeId);
</script>点击国漫
jquery代码创建页面
<script type="text/javascript">
$(function(){
var $tableDiv = $("#tableDiv");
//创建a标签
var $a = $("<a>");
$a.attr("href","detail.html");
//创建table
var $table = $("<table>");
var $tr1 = $("<tr><td rowspan='3'><img src='img/1.png'></td><td>名称</td></tr>");
var $tr2 = $("<tr><td>作者</td></tr>");
var $tr3 = $("<tr><td>年份</td></tr>");
//tr放到table
$table.append($tr1);
$table.append($tr2);
$table.append($tr3);
//table放到a
$a.append($table);
//a放到div
$tableDiv.append($a);
});
</script>
<style type="text/css">
img{
width:100px;
height:100px;
}
a{
text-decoration: none;
}
</style>
