JQuery
1.什么是JQuery?
JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法
2.如何调用JQuery?
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
3.使用JQuery绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('div').click(function(){
alert("Hello Word");
})
})
</script>
</head>
<body>
<div>点击弹框</div>
</body>
</html>
$(function(){
})
这段代码的意思是延迟加载的意思,我们以前在操作DOM时,一般将Script写到后边,因为JS遵循自上而下的原则,Script写到上边是获取不到对象的,原生JS中我们可以使用onload进行延迟加载,而JQuery中则使用此代码进行延迟加载
4.JQuery获取的对象和原生JS获取到的对象的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
<script type="text/javascript">
var jqObj = $('#div1');
var Obj=document.getElementById("div1");
document.write(jqObj);
document.write(Obj);
document.write(jqObj==Obj);
</script>
5.使用JQuery对象添加类,删除类以及设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>爱你</h1>
</body>
</html>
<script type="text/javascript">
$('h1').addClass("hone");
$(".hone").css("color","red");
$('h1').removeClass("hone");
</script>
6.使用JQuery设置,获取,移除属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="ls">今天天气不错</div>
</body>
</html>
<script type="text/javascript">
var did= $("div").attr("id");
document.write(did);
$("div").attr({"class":"my","style":"color:red"});
$("div").removeAttr("class");
</script>
7.如何获取以及设置元素中HTML,文本,表单的文本内容?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<span style="color: red;">哈哈</span>
</div>
<span id="">
你好
</span><br>
<input type="text" value="111" />
</body>
</html>
<script type="text/javascript">
var dh=$("div").html();
$("div").html("<h1>我爱你<h1>")
$("span").text();
$("span").text("BestLee");
var res=$("input").val();
document.write(res);
$("input").val("hello");
document.write($("input").val());
</script>
8.JQuery切换Class属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.div1{
height: 200px;
width: 200px;
background-color: red;
}
.div2{
height: 200px;
width: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1"></div>
<button type="button">点击切换样式</button>
</body>
</html>
<script type="text/javascript">
$("button").click(function(){
$("div").toggleClass("div2");
})
</script>
9.JQuery对象和原生对象的互相转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="div1">
哈哈
</div>
</body>
</html>
<script type="text/javascript">
var do1=document.getElementById("div1");
var jq=$("#div1");
var jqdo=$(do1);
jqdo.css("background-color","red");
jq.get(0).style.fontSize="30px";
</script>
10.JQuery创建元素并添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var res=$("<h1>今天天气真好<h1>");
$("body").append(res);
$("body").append("<h2>哈哈<h2>")
</script>
11.JQuery中如何绑定和解绑事件?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">按钮1</button>
<button type="button">按钮2</button>
</body>
</html>
<script type="text/javascript">
$("button").on("click",function(){
alert("1");
});
$("button").eq(1).off("click");
</script>
12.JQuery复制和删除元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button" class="bt1">按钮1</button>
</body>
</html>
<script type="text/javascript">
$("button").click(function(){
alert(1);
})
var x=$("button").clone(true);
$("body").append(x);
$("body").remove();
</script>
13.事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#one{
height: 500px;
width: 500px;
background: #FFFF00;
}
#two{
height: 300px;
width: 300px;
background: red;
}
#three{
height: 100px;
width: 100px;
background: black;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<form action="#" method="post">
<input type="text" id="" value="" name="username"/>
<input type="submit" value="提交"/>
</form>
<div id="one">
<div id="two">
<div id="three">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$('a').click(function(e){
e.preventDefault();
alert("abc");
})
$('form').submit(function(e){
e.preventDefault();
alert("异步提交");
})
$('#one').click(function(e){
e.stopPropagation()
alert(1111)
});
$('#two').click(function(e){
e.stopPropagation()
alert(222)
});
$('#three').click(function(e){
e.stopPropagation();
alert(333)
});
</script>