目录
1.快速上手
- 下载jQuery:
https://jquery.com
教程：jQuery 安装 | 菜鸟教程 (runoob.com)
jQuery下载安装使用教程 - [OJBK] - 博客园 (cnblogs.com)- 动态加载【建议】：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>- 如何查看jQuery是否已经加载：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加载jquery</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 导入jquery --> </head> <body> <script type="text/javascript"> //检验是否加载成功 if(typeof jQuery == 'undefined'){ console.log('11111'); }else{ console.log('2222'); } </script> </body> </html>- 应用jQuery:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>初识jquery</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 动态加载jquery --> </head> <body> <h1 id='txt'>中国联通</h1> <script type="text/javascript"> //利用jquery中的功能，实现某些效果 //需求：修改标题“中国联通” //1.老办法： // var txt=document.getElementById('txt'); // txt.innerText='河南联通'; //2.新办法 $("#txt").text('111');//$()就是寻找标签；“#txt”：就相当于CSS当中的选择器；text()：修改文本内容。 </script> </body> </html>
2.寻找标签
2.1 直接寻找
- ID选择器：
- 样式选择器（类选择器）：
- 标签选择器：
- 层级选择器：
- 多选择器：
- 属性选择器：
2.2 间接寻找
- 找同级兄弟：
- 找父子：
2.3 小案例：菜单的切换【找标签的训练】
需求：多个城市，初始状态都是隐藏状态，当点击时，展开子菜单，同时隐藏其余的所有子菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例：菜单的切换</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 动态加载jquery -->
<style>
.menus{
height: 800px;
width: 200px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;/*鼠标放上去就变成小手了*/
}
.menus .content a{
display: block;/*占一行*/
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class='menus'>
<div class='item'>
<div class="header" onclick="clickMe(this);">上海1</div>
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class='item'>
<div class="header" onclick="clickMe(this);">北京</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
<div class='item'>
<div class="header" onclick="clickMe(this);">上海2</div>
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class='item'>
<div class="header" onclick="clickMe(this);">上海3</div>
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
</div>
<script>
function clickMe(self){
//$(self)：表示当前点击的那个标签
//$(self).next()：表示当前点击的标签的下一个标签
//$(self).next().removeClass('hide')：删除样式
//让自己下面的功能展示出来
$(self).next().removeClass('hide');
//找父亲的所有兄弟姐妹，再去每个兄弟的子孙中寻找class=content,添加hide样式
$(self).parent().siblings().find('.content').addClass('hide');
}
</script>
</body>
</html>3.操作样式
- addClass()
- removeClass()
- hasClass()
4.值的操作
4.1 操作介绍
4.2 案例：动态创建数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例：动态创建数据</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 动态加载jquery -->
</head>
<body>
<input type="text" id="txtUser" placeholder="用户名"/>
<input type="text" id="txtEmail" placeholder="邮箱"/>
<input type="button" value="提交" onclick="getInfo()"/>
<ul id='view'>
<li>heiheihei</li>
</ul>
<script>
function getInfo(){
//1.获取用户名信息和邮箱
var username=$("#txtUser").val();
var email=$("#txtEmail").val();
var dataString=username+'-'+email;
//2.创建li标签，在li的内部写入内容 $("<li>")：创建li标签
var newLi=$("<li>").text(dataString);
//3.把新创建的li标签添加到ul里面
$('#view').append(newLi);
}
</script>
</body>
</html>5.绑定事件
5.1 操作介绍
5.2 案例1:点击li标签内容会输出到控制台
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定事件</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 动态加载jquery -->
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script>
$('li').click(function(){
var text=$(this).text();//$(this)：代表点击的是哪个标签
console.log(text)
})
</script>
</body>
</html>在jQuery中可以删除某个标签：
<div id='c1'>内容</div>
<script>
$('#c1').remove();
</script>当页面框架加载完成之后执行代码：
<script>
$(function(){
//当页面的框架加载完成之后，自动就执行
。。。
})
</script>什么叫页面框架加载完成：比如一个图片很大，需要加载很长时间，但加上这个$(function(){}），就可以不等待这个图片加载好就执行{。。。}内部代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定事件</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 动态加载jquery -->
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<img src="oversize.png" alt="请刷新">
<li>搜狗</li>
</ul>
<script>
<script>
$(function(){
//当页面的框架加载完成之后，自动就执行
//什么叫页面框架加载完成：比如一个图片很大，需要加载很长时间，但加上这个东西，就可以不等待这个图片加载好就执行此代码
$('li').click(function(){
var text=$(this).text();//$(this)：代表点击的是哪个标签
console.log(text)
})
})
</script>
</script>
</body>
</html>7.表格操作
需求： 点击删除键，删除所在的一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格操作</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 动态加载jquery -->
</head>
<body>
<!-- 需求：当点击删除按钮时，将当前行删除掉 -->
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>zmj</td>
<td>
<input type="button" value="删除"/ class="delete"/>
</td>
</tr>
<tr>
<td>2</td>
<td>zmj</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
<tr>
<td>3</td>
<td>zmj</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
<tr>
<td>4</td>
<td>zmj</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
</tbody>
</table>
<script>
$('.delete').click(function(){
//删除当前行的数据
$(this).parent().parent().remove()
})
</script>
</body>
</html>
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
