您的位置：首页 > Web前端 > JQuery

jQuery系列之基本语法以及选择器(一)

2017-06-15 08:45 369 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入jQuery的js文件,然后就可以使用jq的语法了-->
<script src="jquery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">

//在这个script标签中,书写我们自己的代码
//jQuery封装了js代码,暴露出jq风格的函数
// 我们使用jq的函数,本质上也是在使用js的代码

//jq的基本语法
//$(selector).actions()
//selector:选择器,可以是标签选择器,类选择器,id选择器
//actions():要对选择器找到的标签做什么事,一系列操作
//当文档加载完毕后,再执行jq代码,
//这样可以防止在body没加载完毕,去使用一个未被创建的元素

//两种写法
//(一)
$(function () {
$("p").click(function () {
alert("hello js");
});
});

//(二)
//callback 回调
$(document).ready(function(){
//执行这个函数时,文档已经加载完毕
// 在这里写代码

//标签选择器
//click监听p的点击事件
/
b389
/将函数传入click(这里),当p被点击时,就会执行这个函数
$("p").click(function(){
//这个this能找到p 执行hide函数,将p隐藏
$(this).hide();
});

//类选择器
$(".hide").click(function(){
$(this).hide();
});
//id选择器
$("#showP").click(function(){
//当点击了id为showP的元素 就会执行这个函数,在这个函数中,
// 又写了一个选择器,找到p元素,将他显示
$("p").show();
});

});

</script>

</head>
<body>
<p>点我点我</p>
<p class="hide">哈哈哈</p>
<button id="showP">我们都有一个家名字叫中国</button>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航