基本概况
jQuery是JavaScript的函数库,使用人数多。对于网页开发者来说,学会jQuery是必要的,因为它可以使人们更加了解网页设计。
jQuery的安装多种多样,可以从网页上添加jQuery库,也可以从官网jquery.com下载jQuery,亦或是通过CDN引用。在写代码时可以通过HTML来引用
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
(具体教程可以看菜鸟教程)
jQuery的使用
jQuery的使用一般是美元符号定义 jQuery,是将一个选择表达式,放进构造函数jQuery(),然后得到想要的元素。
如下列代码所示,就是点击按钮后,将所有p标签的代码隐藏,$(“p”)是选择所有p标签。
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
还可以选择id,jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素;还可以是class选择器,$(".test")就是选择class为test的元素。
另外,选择表达式可以是css选择器,如:
$(document)//选择整个文档对象
$('div.myClass')//选择class为myClass的div元素
jQuery还有一些特殊的表达式,如
$('a:first')//选择网页中第一个a元素
$('#myForm :input')//选择表单中的input元素
等等。
jQuery常用的事件有click(),mouseleave()、mouseenter(),经常用来实现动画的实现。在使用时,常常用自定义的函数来操作它。
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
});
</script>
<body>
<p id="p1">鼠标指针进入此处,会看到弹窗。</p>
</body>
这段代码就是在鼠标移动到p标签的字体时,会弹框出alert里边的内容,通过函数来实现。通过这些动画可以实现一些不同的功能。
jQuery可以将多个操作写在一起,形成链式操作,
$('div').find('h3').eq(2).html('Hello');
等价于
1 $('div')//找到div元素
2 .find('h3')//选择其中的h3元素
3 .eq(2)//选择第3个h3元素
4 .html('Hello'); //将它的内容改为Hello
其中jQuery还提供了.end()的返回方法,可以回到上一步。
jQuary还能进行DOM操作,主要有三种:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
$("#tex").click(function(){
alert("Text: " + $("#test").text());
});
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="tex">显示文本</button>
这段代码就会将p标签中的文字弹框显示并将忽略HTML代码的格式