应用jQuery,首先页面需要引入标签库: jquery.min.js
jQuery是一个javaScript类库,主要包含一下功能:
*HTML元素选取
*HTML元素操作
*HTML事件函数
*CSS操作
*javaScript特效和动画
*AJAX
基础语法: $(selector).action()
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
应用:
1.如下: 表示当点击<p>标签内容的时候,触发click函数,函数方法为隐藏当前标签内容
(注:经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中,这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。)
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
注:
$(document).ready(function(){
// 开始写 jQuery 代码...
});
简洁写法:
$(function(){
// 开始写 jQuery 代码...
});
2.jQuery 是为事件处理特别设计的。
点击事件:
$("p").click(function(){
$(this).hide();
});
双击事件:
$("p").dblclick(function(){
$(this).hide();
});
focus 事件:(当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点)
blur 事件:(当元素失去焦点时,发生 blur 事件)
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
jQuery DOM操作:
如下:(
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记))
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
val() 方法获得输入字段的值:
<script>
$(document).ready(function(){
$("button").click(function(){
alert("值为: " + $("#test").val());
});
});
</script>
<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
attr() 方法用于获取属性值:
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#runoob").attr("href"));
});
});
</script>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
attr() 方法也用于设置/改变属性值:
设置单个属性:
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
设置多个属性:
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
css() 方法设置或返回被选元素的一个或多个样式属性。
取值:
$("p").css("background-color");
赋值:
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});