jQuery入门
jQuery的使用方法：直接将jQuery的源文件拷贝到html文件的js目录中即可
前端代码的压缩：删除所有注释和空格，并且修改变量名以混淆。
1. jQuery文档加载完再执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 等所有页面的内容加载完再执行，包括标签和图片
window.onload = function(){
var oDiv = document.getElementById("div01");
alert('原生js获取的div:'+oDiv);
}
// 页面加载完再执行
// $(参数) 表示函数
$(document).ready(function(){
// 接收一个jQuery对象
var $div = $("#div01"); // 传入样式选择器的写法就可以选中
alert('jQuery获取的div:'+$div);
})
// jQuery代码执行的比原生的快
// 等标签加载完就执行了
</script>
</head>
<body>
<div id="div01">这是一个div</div>
</body>
</html>
jQuery简写为：
$(function(){
...
...
})
2. jQuery选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 使用id选择器选择元素
var $div = $('#div01');
// 使用类选择器选择元素
var $div2 = $('.box');
// 使用标签选择器选择元素
var $li = $('li');
// 使用层级选择器选择元素
var $span = $('.box span');
// 使用属性选择器选择元素
var $div3 = $('div[class="box2"]');
// 选择包含span标签的div
var $div4 = $('div').has('span');
// 选择样式类名不是box2的div
var $div5 = $('div').not('.box2');
// 选择列表中的第三个li
var $li2 = $('li').eq(2);
// 设置样式
$div.css({'color':'red', 'font-size':30});
$div2.css({'color':'pink', 'fontSize':'30px'});
$li.css({'background':'gold', 'width':200});
$span.css({'color':'red'});
$div3.css({'color':'green', 'font-size':30});
$div4.css({'text-indent':50});
$div5.css({'text-decoration':'underline'});
$li2.css({'font-style':'italic'});
})
</script>
</head>
<body>
<div id="div01">这是第一个div</div>
<!-- .box*2 -->
<div class="box">这是第二个<span>div</span></div>
<div class="box">这是第三个div</div>
<div class="box2">这是第四个div</div>
<ul>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>
- 转移选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div01');
// 从当前标签转移到上一个紧挨的兄弟标签
$div.prev().css({'color':'red'});
// 从当前标签转移到上面所有的兄弟标签
$div.prevAll().css({'text-indent':50});
// 从当前标签转移到下一个紧挨的兄弟标签
$div.next().css({'color':'blue'});
// 从当前标签转移到上面所有的兄弟标签
$div.nextAll().css({'text-indent':80});
// 从当前标签转移到其他所有的兄弟标签（除去自己）
$div.siblings().css({'text-decoration':'underline'});
// 从当前标签转移到其父级标签
$div.parent().css({'background':'green'});
// 从当前标签转移到其子级标签
$div.children().css({'color':'red'});
// 选择一个class名称是sp02的子级
$div.find('.sp02').css({'font-size':30});
})
</script>
</head>
<body>
<div>
<h2>这是一个h2标题</h2>
<p>这是一个p标签</p>
<div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div>
<h3>这是一个h3标题</h3>
<p>这是第二个p标签</p>
</div>
</body>
</html>
- jQuery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div01');
var $div2 = $('#div02');
var $li = $('.list li');
// 转移后的对象没有指向，返回空对象
var $div3 = $div.prev();
// 通过jQuery对象的length属性来查看它是否包含元素
var iLen = $div.length; // 1
// alert(iLen);
// 没有选中元素length为0
var iLen2 = $div2.length; // 0
// alert(iLen2);
var iLen3 = $li.length; // 8 说明里面有8个li
// alert(iLen3);
var iLen4 = $div3.length; // 转移后的对象没有指向，length为0
alert(iLen4);
})
</script>
</head>
<body>
<div id="div01">这是第一个div</div>
<!-- ul.list>li{列表文字}*8 -->
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>
3. jQuery样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<style>
.red{
color: red;
}
.big{
font-size: 30px;
}
.noline{
text-decoration: none;
}
</style>
<script>
$(function(){
var $div = $('#div01');
var $div2 = $('div');
var $a = $('#link01');
// 读取样式属性值
var sSize = $div.css('font-size'); // 16px
// alert(sSize);
// 写属性值，也叫设置属性值
// 设置一个属性，可以不写成字典的形式
$div.css('color', 'red');
// 设置多个属性要写成字典的形式
$div.css({'font-size':30, 'font-weight':'bold'});
// 获取多个元素的样式属性值
// 获取多个元素的样式属性值只返回第一个元素的属性值
var sSize2 = $div2.css('font-size');
// alert(sSize2);
// 操作元素的样式类名
// 增加样式类名
$a.addClass('red');
$a.addClass('big');
$a.addClass('noline');
// 删除样式类名
$a.removeClass('red');
})
</script>
</head>
<body>
<div id="div01">这是第一个div</div>
<div>这是第二个div</div>
<a href="#" id="link01">这是一个链接</a>
</body>
</html>
4. jQuery的click事件、this关键字、索引值
-
this关键字：点击的哪一个，this指的就是哪个。this是原生对象，直接使用this要使用原生js语法。
$(this)是jQuery对象，可以使用jQuery语法。
-
index()可以获取选中元素的索引值
- 索引值代表的是它的结构中的第几个，并不是选中的元素集合中的第几个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $li = $('.list li');
var $p = $('p');
// alert($li.length);
// 绑定click事件
$li.click(function(){
// 点的哪一个，this指的就是哪个
// this.style.background = 'red';
// $(this)指的是当前发生click事件的jQuery对象
$(this).css('background', 'red');
// 获取当前点击元素的索引值
alert($(this).index());
});
// 这里的index()索引值代表的是它的结构中的第几个，并不是选中的元素集合中的第几个
alert($p.eq(0).index());
alert($p.eq(1).index());
})
</script>
</head>
<body>
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<div>
<p>这是第一个p标签</p>
</div>
<div>
<p>这是第二个p标签</p>
</div>
</body>
</html>
5. 选项卡练习
jQuery中的链式调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
background:gold;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('.tab_btns input')
var $div = $('.tab_cons div');
$btn.click(function(){
// jQuery的方法执行完毕后会再返回这个对象
$(this).addClass('active').siblings().removeClass('active');
// alert($(this).index());
$div.eq($(this).index()).addClass('current').siblings().removeClass('current');
});
})
</script>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
</html>
扫一扫
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
