jquery是什么
jQuery是目前最流行的JavaScript程序库,它通过封装原生的JavaScript函数得到一整套定义好的方法。
现今jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。
有什么好处
它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的喜爱和选用。
jquery功能
1.精确选择页面对象
2.进行可靠的CSS样式控制
3.使DOM操作规范化
4.标准化事件控制
5.支持网页特效
6.快速通信
7.扩展JavaScript内核
如何使用jquery
1)下载地址jquery.com
2)版本说明
jquery.3..js 开发版 (空间大 有格式)
jquery.3..min.js 发布版(空间小 无格式)
3)使用 向引用普通js一样引用jquery
jquery如果与其他js框架混用的话,建议放到引用的第一行
在工程目录下建一个/js目录。将jquery的文件拷贝到下面
\js\jquery-1.11.2.min.js
4)页面使用时。
step1 引用jquery
<script src="../js/jquery-1.11.2.min.js"></script>
语法规则
$(选择器).action();
document.ready()和window.onload()区别
1)加载时机不同document.ready()是文档加载完毕即执行。window.onload()需要等待页面上所有的内容都加载完才可以执行
2)document.ready()在同一个页面里可以写多次,onload只能写一次
3)document.ready()有简化写法
四种写法
$(document).ready(function () {
alert("helloworld");
}
)
jQuery(document).ready(function () {
alert("helloworld");
}
)
jQuery(function () {
alert("helloworld");
}
)
$(function () {
alert("helloworld");
}
)
学生练习
使用4种写法在页面加载时弹出"hello jquery"
对象转换
普通对象转换成JQ对象时,用$()把对象包起来就ok
例子:
<script>
$(function () {
var lis=document.getElementsByTagName("li");//获取li对象集合
//把其中的第二个元素转化为jquery对象
var $li=$(lis[1]);
alert($li.html())
}
)
</script>
<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
jquery转成dom,用get索引的方式
例子:
$(function () {
var $li=$("li");//jq语法选择li
//转换成dom类型的li
var li2=$li[1];
alert(li2.innerHTML);
})
$(function () {
var $li=$("li");//jq语法选择li
//转换成dom类型的li
var li2=$li.get(1);
alert(li2.innerHTML);
})
<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
jquery常用语法
css引用方式:
第一种.css(key,value);
<div id="div1"></div>
<script>
$(function () {
$("#div1").css("width","300px")
.css("height","400px")
.css("background-color","red");
})
</script>
第二种.addClass(classname);
<div id="div1"></div>
<style>
.class1{
width: 300px;
height: 200px;
border:1px solid blue;
}
</style>
<script>
$(function () {
$("#div1").addClass("class1");
})
</script>
next()用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
$(".item1").next().next().css("color","green");
})
</script>
</head>
<body>
<ul>
<li class="item1">line1</li>
<li>line2</li>
<li>line3</li>
</ul>
</body>
</html>
html()获取html内容, 类似原生js的innerHTML
text()获取文本内容,类似原生js的innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
$(".item1").next().next().css("color","green");
alert($(".item1").next().html());
alert($(".item1").next().text());
})
</script>
</head>
<body>
<ul>
<li class="item1">line1</li>
<li><p>line2</p></li>
<li>line3</li>
</ul>
</body>
</html>
打印结果是
<p>line2</p>
line2
总结:.text()是获取纯文本内容,过滤html部分
.html()可以获取html内容
jquery事件
介绍其中一种写法,以后还会介绍其他写法
$(选择器).事件(function(){})
如:
<span id="text1"> text1</span>
<script>
$(function () {
$("#text1").click(function () {
$(this).css("font-size","30px");
});
})
</script>
课堂练习:
1、需求说明
实现问答特效
点击问题后,解答在下面显示出来(使用了click()方法)
2、需求说明
点击页面中的文字“请为我们的服务做出评价”,弹出消息框,显示“非常满意”
将DOM对象转换为jQuery对象,再调用jQuery对象的方法
3、需求说明
使用DOM方式进行判断,当复选框选中时,弹出窗口
将jQuery对象转换为DOM对象,再调用DOM对象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
var $chk1= $("#chk1");
var chk_sim=$chk1.get(0);
/*$chk1.click(function () {
if(chk_sim.checked){
alert("操作成功");
}
})*/
chk_sim.onclick=function () {
if(chk_sim.checked){
alert("操作成功");
}
}
})
</script>
</head>
<body>
<!--需求说明-->
<!--使用DOM方式进行判断,当复选框选中时,弹出窗口-->
<!--将jQuery对象转换为DOM对象,再调用DOM对象的方法-->
<input id="chk1" type="checkbox">接受服务条款
</body>
</html>