jQuery的引入
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
一.jQuery 语法实例
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 【HTML】 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>
<script>
//1.一定要注意语句后面一定要加分号
//2.jquery不要问，就是要加$的符号
$(document).ready(function(){ //本句话的意思是在文档加载后激活函数
$("button").click(function(){ //获取元素
$(this).hide();
});
});
</script>
</head>
<body>
<button type="button">我是第一个按钮，点我我隐藏哦</button>
</body>
</html>
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
//获取元素ID的方式，不要忘记双引号
$("#test").hide();
});
});
</script>
</head>
<body>
<p id="test">我是文字</p>
<button type="button">我是 按钮，点我上面的文字就会隐藏</button>
</body>
</html>
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
//直接获取元素，不用加#，但是不要忘记双引号。
$("p").hide();
});
});
</script>
</head>
<body>
<p>我是第一行文字</p>
<p>我是第二行文字</p>
<button type="button">我是 按钮，点我上面的文字就会隐藏</button>
</body>
</html>
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
//获取class="test"的元素
$(".test").hide();
});
});
</script>
</head>
<body>
<h1 class="test">我是H1</h1>
<p class="test">我是第一行文字</p>
<p class="test">我是第二行文字</p>
<button type="button">我是 按钮，点我上面的文字就会隐藏</button>
</body>
</html>
jQuery 效果
隐藏和显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("p").show(1000);
// toggle()方法用于切换 show()and hide()方法
// $("p").toggle(1000);
});
$("#hide").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p class="test">我是文字</p>
<button type="button" id="show">显示</button>
<button type="button" id="hide">隐藏</button>
</body>
</html>
淡入淡出效果
通过 jQuery，可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn() 用于淡入已隐藏的元素。
fadeOut() 用于淡出可见元素。
fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
#d1{
background-color: #0000FF;
height: 40px;
width: 80px;
display: none;
}
#d2{
background-color: #000000;
height: 40px;
width: 80px;
display: none;
}
#d3{
background-color: #00AA00;
height: 40px;
width: 80px;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
//---------------------------------------------
$("#d1").fadeIn("slow");
$("#d2").fadeIn();
$("#d3").fadeIn(3000);
//---------------------------------------------
// $("#d1").fadeOut("slow");
// $("#d2").fadeOut();
// $("#d3").fadeOut(3000);
//---------------------------------------------
// $("#d1").fadeToggle("slow");
// $("#d2").fadeToggle();
// $("#d3").fadeToggle(3000);
//---------------------------------------------
// $("#d1").fadeTo("slow");
// $("#d2").fadeTo();
// $("#d3").fadeTo(3000);
//---------------------------------------------
});
});
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<button type="button" id="show">点击 显示</button>
</body>
</html>
滑动效果
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
-----------------------------------------------------
eg：
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.8.3.js">
</script>
<script>
$(document).ready(function() {
$(".flip").click(function() {
$(".panel").slideDown("slow");
});
});
</script>
<style type="text/css">
div.panel,
p.flip {
margin: 0px;
padding: 5px;
text-align: center;
background: #e5eecc;
border: solid 1px #c3c3c3;
}
div.panel {
height: 120px;
display: none;
}
</style>
<body>
<div class="panel">
<p>是的</p>
<p>这里可以展开</p>
</div>
<p class="flip">请点击这里</button>
</body>
</html>
jQuery的页面加载与js的比较 + js的简写过程
window.onload = function(){
alert("张三");
}
//传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
window.onload = function(){
alert("老王");
}
------------------------------------------------
jQuery(document).ready(function(){
alert(" this is jQuery")
})
//可以简写为下面
$(document).ready(function(){
alert("this is no.2")
})
//还可以简写为下面
$(function(){
alert("this is no.3")
})
jQuery的获取
$(function(){
//1.js方式 获取
document.getElementById("btn").onclick=function(){
location.href="惊喜.html"
}
//2.jq方式获取
$("#btn").onclick=function(){
location.href="惊喜.html"
}
})
------------------------------------------------------------
//上面的 js 与jq 获取下面input标签的内容
<input type="button" value="这里有惊喜！哈哈哈!" id="btn"/>
jQuery ---Dom与JQ对象之间的转换
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function write1(){
var dom1 = document.getElementById("span1");
//dom向jq对象转换方式1
$(dom1).html("dom转jq方式1");
}
$(function(){
$("#btn").click(function(){
$("#span1").html("这是jq的写入");
//jq向dom对象转换方式1
$("#span1").get(0).innerHTML="方式1";
//jq向dom对象转换方式2
$("#span1").[0].innerHTML="方式2";
})
})
</script>
<body>
<input type="button" value="JS写入" onclick="write1()"/>
<input type="button" value="JQ写入" id="btn"/><br />
班长：<span id="span1">这里有变化</span>
</body>
使用jQuery完成复选框的全选和全不选
$(function(){
$("#select").click(function(){
//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
//attr方法与JQ的版本有关，在1.8.3及以下有效。
//$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});
});
使用jQuery完成省市二级联动
<script>
$(function(){
//2.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function(){
//10.清除第二个下拉列表的内容
$("#city").empty();
//1.获取用户选择的省份
var val = this.value;
//alert(val);
//3.遍历二维数组中的省份
$.each(cities,function(i,n){
//alert(i+":"+n);
//4.判断用户选择的省份和遍历的省份
if(val==i){
//5.遍历该省份下的所有城市
$.each(cities[i], function(j,m) {
//alert(m);
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
网友评论