点击刷新
一、jQuery是什么
1.jQuery的特点
● jQuery 是一个 JavaScript 函数库。
● jQuery是一个轻量级的“写得少，做得多”的JS库
● jQuery 很容易学习
● jQuery还提供了大量的插件
● jQuery版本2以上不支持低版本浏览器
2.导入jquery库
在使用jQuery的时候，首先需要导入jQuery的库，我们在head标签中导入库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>111</title>
<!-- 在head头部处导入jq包 -->
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<!-- 检验是否导入成功 -->
<script>
console.log($);
<script>
</body>
</html>
如果不报错则表示导入成功
二、JQuery的常见选择器
使用jQuery的便利
● 在jQ中我们获取元素的方法变得比较简单，例如：
$('#id名')，$('.标签名')，$('class名')
● 可以通过元素 css('属性名’,‘属性值’)修改属性
选择器代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个完整的静态页面</title>
<!-- 在head头部处导入jq包 -->
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<!-- css文件样式 -->
<style type="text/css">
*{margin:0;padding:0;list-style: none}
.header{
min-width:960px;
overflow: hidden;
border:1px solid #c4c4c4;
}
.center{
width:960px;
height:90px;
margin:0 auto;
}
.header .logo{
margin-top:10px;
float:left;
}
.nav_top{
width:685px;
float:right;
/*background:red;*/
margin-top:10px;
margin-left:10px;
}
.nav_top li{
float:left;
width:90px;
border:1px solid green;
line-height:65px;
margin-left:-1px;
text-align: center;
}
.content{
width:960px;
min-height:500px;
margin:10px auto;
overflow: hidden;
border:#c4c4c4 solid 1px;
}
.content ul{
margin-top:10px;
margin-bottom:10px;
}
.content li{
width:225px;
height:300px;
border:1px solid #c4c4c4;
float:left;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
}
.footer{
width:960px;
min-height:50px;
margin:0 auto;
border:#c4c3c4 solid 1px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<div class="header">
<div class="center">
<div class="logo">
我是logo
</div>
<ul class="nav_top">
<li id="item1">首页</li>
<li>在线视频</li>
<li id="item3">QQ音乐</li>
<li>百度文库</li>
<li>员工信息</li>
<li>查看这里</li>
<li>关于我们</li>
</ul>
</div>
</div>
<!-- 中间内容 -->
<div class="content" >
<ul style="overflow: hidden;">
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li class='item5'>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
<li>
<img src="./image/1.jpg" width="100%">
</li>
</ul>
</div>
<!-- 尾部 -->
<div class="footer">
COPYRIGHT©哈哈哈
</div>
<script type="text/javascript">
// 基本选择器 id class 标签，注意css方法后只能加一个属性和属性值
// $('#item1').css('border','1px solid pink');
// $('.logo').css('border','1px solid pink');
// $('li').css('background','pink');
//------------------------------------------------------------------
// 后代选择器
// $('.nav_top li').css('background','blue');
// 子选择器
// $('.logo>img').css('border','1px solid red');
// 并列选择器
// $('#item1,#item3').css('color','#369');
// 属性选择器
// $('ul[class="nav_top"]').css('background','red');
// //ul下的li的除了id名字为item3
// $('ul li[id!=item3]').css('background','yellow');
//---------------------------------------------------------------------
// 获取第一个元素 :first
// $('li:first').css('background','red');
//---------------------------------------------------------------------
// 获取最后一个元素 :last
// $('li:last').css('background','yellow');
//---------------------------------------------------------------------
// 获取指定索引的元素 eq() 索引从0开始
// $('li:eq(1)').css('background','green');
// $('li').eq(7).css('background','pink');
// $('ul').eq(1).css('border','3px solid red');
// 获取第五张图片
// $('.content li').eq(4).css('background','gold');
//---------------------------------------------------------------------
// 获取所有的子元素-children()
// 获取body的子元素
// $('body').children().css('border','1px solid #444');
// $('ul').children().css('background','yellow');
//---------------------------------------------------------------------
// 获取上一个同级元素-prev()
// $('.item5').prev().css('background','#672');
//---------------------------------------------------------------------
// 获取下一个同级元素-next()
// $('.item5').next().css('background','#194352');
//---------------------------------------------------------------------
// 获取所有的同级元素-siblings() 查找除了自己以外的所有同级元素
// $('.item5').siblings().css('background','green');
//---------------------------------------------------------------------
// 获取父元素-parent()
// $('.item5').parent().css('background','pink');
//---------------------------------------------------------------------
// 获取先辈元素-parents() 如果不传参数 获取所有的先辈元素 通过传参获取指定的先辈元素
// $('.item5').parents('.content').css('border','1px solid red');
// $('ul').parents().css('background','pink');
//---------------------------------------------------------------------
// 在父元素中查找指定的子元素-find() 必须传参数 如果不传参数没有效果
// $('html').find('.item5').css('border','1px solid red');
// $('body').find('li').css('background','blue');
</script>
</body>
</html>
三、JQuery的元素操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的操作</title>
<script type="text/javascript" src='./jquery-1.8.3.min.js'></script>
<style>
.item1{
border:3px solid red;
}
.item2{
font-size:30px;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="text" value="来呀"><br>
<img src="./image/1.jpg">
<script>
//设置css样式
//一次设置一个样式
// $('.box').css('background','yellow');
// $('.box').css('width','200px');
// $('.box').css('height','200px');
// 一次设置多个样式,传入一个对象
$('.box').css({background:'yellow',height:'200px'})
//----------------------------------------------------------
//文本内容的操作（注意会将原值覆盖）
//html,会解析标签
$('.box').html('<h1>哈哈哈</h1>');
//text，不会解析标签
// $('.box').text('<h1>嘻嘻嘻</h1>');
//----------------------------------------------------------
//表单值的操作-val()
//获取(无参数为获取)
console.log($('input').val());//来呀
//设置(有参数为修改)
$('input').val('我是帅哥');
//----------------------------------------------------------
//属性操作
//attr设置或返回被选元素的属性值。
//获取属性的值，传一个参数
console.log($('img').attr('src'));
//设置属性的值，一次传一个
$('img').attr('alt','真嬴荡');
//设置多个属性的值，传一个对象
$('img').attr({alt:'我是图片',title:'图片去哪里了'});
//删除属性，例如删除本图片的src属性
// $('img').removeAttr('src');
//----------------------------------------------------------
// class属性的操作
// 给.box追加类名 在原来的基础是追加 不会删除原来的类名
$('.box').addClass('item1 item2');
// 删除类名 如果不传参数会将所有的类名都删除掉,多个参数引号里用空格分开
$('.box').removeClass('item2');
</script>
</body>
</html>
四、相关尺寸函数
| 函数 | 作用 |
|---|---|
| offset() | 获取元素相对文档的偏移位置，返回的是一个包含top 和left属性的对象，可以使用offset().left和offset().top来获取单独值 |
| scrollTop() | 获取文档的滚动距离，获取文档的垂直方向的滚动距离 返回的是一个数字 |
| width() | 获取宽，多个元素对象会获取的是第一个元素的宽 ，只获取元素的内容大小 |
| height() | 多个元素对象会获取的是第一个元素的高 ，只获取元素的内容大小 |
| innerWidth() innerHeight() |
获取宽和高，获取包含内间距 不包含边框 |
| outerWidth() outerHeight() |
获取宽和高，包含内间距包含边框 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0;}
body{
height:2000px;
width:2500px;
}
.box1{
width:200px;
height:200px;
background: #0f0;
padding:20px;
border:3px solid red;
}
.box2{
width:300px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box1 box2">2</div>
<script>
// 获取元素相对文档的偏移位置
// offset() 返回的是一个包含top 和left属性的对象
// 获取box1和box2的相对于文档的位置
console.log($('.box1').offset());
console.log($('.box2').offset());
// 获取文档的滚动距离
// scrollTop() 获取文档的垂直方向的滚动距离 返回的是一个数字
console.log($(document).scrollTop());
// scrollLeft() 文档的水平方向的滚动距离
console.log($(document).scrollLeft());
// 获取元素的宽度和高度
// width() height() 多个元素对象会获取的是第一个元素的宽高 ，只获取元素的内容大小
// innerWidth() innerHeight() 获取包含内间距 不包含边框
// outerWidth() outerHeight() 包含内间距包含边框
console.log($('.box1').width());
console.log($('.box1').height());
console.log($('.box1').innerHeight(),'innerheight');
console.log($('.box1').outerHeight(),'outerheight');
// 获取浏览器窗口的大小
console.log($(window).width())
// 获取文档的宽高
console.log($(document).width())
console.log($(document).height())
</script>
</body>
</html>
五、常用的事件方法
1. 绑定事件的两种方式
在js中我们比如使用鼠标点击事件是这样操作
var But=document.getElementsByClassName('button');
But[0].onclick=function(){
代码块；
}
但是在jQ中我们将事件封装为一个方法
方法一：直接使用
$('button').eq(0).click(function(){
代码块;
})
方法二：on方法绑定，可同时使用多个事件
①若是单个事件，传入两个参数，参数一为事件名，参数二为事件执行函数
$('button').on('click',function(){
alert('我是on');
})
②若是多个事件，需要传入一个对象，例如鼠标移入和移出
$('button').on(
{mouseover:function(){console.log('我进来啦')},
mouseout:function(){console.log('我出来啦')}
})
2.解除绑定
当我们不需要事件时候，可以使用off（）方法解除所有绑定事件
$('button').off();
案例-鼠标拖拽：实现一个div块会随着鼠标的按下而移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0;}
.box{
width:200px;
height:200px;
background:pink;
position: absolute;
}
</style>
</head>
<body>
<button>on方法绑定</NOtton>
<div class="box"></div>
<script>
// 当用户在div中按下 移动 让div跟着鼠标移动
// 1.给div绑定一个鼠标按下事件
// 2.给div绑定一个鼠标移动事件
// 3.获取鼠标的位置
// 4.设置div的位置
//事件对象：当触发某一个事件时候，调用回调函数时候，系统会自动触发一个event对象，event主要记录了键盘和鼠标的信息，但是需要传入一个参数接收数据。常用的有：
// clientx 接收鼠标x
// clienty 接收鼠标y
$('.box').on('mousedown',function(){
// 鼠标按下后绑定移动事件
$(window).on('mousemove',function(e){
// 获取鼠标从相对于浏览器窗口的位置
var Sx = e.clientX;
var Sy = e.clientY;
// 让鼠标在div中间 鼠标当前位置-div宽高的一半
var divsx=$('.box').offset().left;
var divsy=$('.box').offset().top;
var newsx = Sx-$('.box').width()/2;
var newsy = Sy-$('.box').height()/2;
// 设置div的位置
$('.box').css({left:newsx+'px',top:newsy+'px'});
})
})
// 鼠标抬起事件 抬起之后解除移动事件
$('.box').on('mouseup',function(){
$(window).off('mousemove');
})
</script>
</body>
</html>
六、节点操作
| 函数 | 作用 |
|---|---|
| append() | (追加)将元素插入到指定元素内部的尾部 |
| prepend() | 将元素插入到指定元素内部的前面 |
| after | 将元素插入到指定元素外部的后面 |
| before | 将元素插入到指定元素外部的前面 |
| empty() | 清空指定内部的所有子元素 |
| remove() | 删除指定的元素及其内部子元素 |
| clone() | 可以将纯元素赋值，但是没功能，如果参数加入true，可实现对应复制的功能 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
.wrap{
width:500px;
height:500px;
border:1px solid red;
}
.box{
width:100px;
height:100px;
background:red;
border-radius: 50%;
float:left;
}
</style>
</head>
<body>
<button>append()</button>
<button>prepend()</button>
<button>after()</button>
<button>before()</button>
<button>empty()</button>
<button>remove()</button>
<button>clone()</button>
<button>获取页面元素直接插</button>
<div class="wrap"></div>
<script>
// 将元素插入到指定元素内部的尾部
$('button').eq(0).click(function(){
// 调用创建元素的函数
var el = createEl();
$('.wrap').append(el);
})
// 将元素插入到指定元素内部的前面
$('button').eq(1).click(function(){
// 调用创建元素的函数
var el = createEl();
$('.wrap').prepend(el);
})
// 将元素插入到指定元素外部的后面
$('button').eq(2).click(function(){
var el = createEl();
$('.wrap').after(el);
})
// 将元素插入到指定元素外面的前面
$('button').eq(3).click(function(){
var el = createEl();
$('.wrap').before(el);
})
// 清空wrap内部的所有子元素
$('button').eq(4).click(function(){
$('.wrap').empty();
})
// 删除指定的元素
$('button').eq(5).click(function(){
$('.wrap').remove();
})
// 将第一个button复制 并插入到wrap内
$('button').eq(6).click(function(){
var newbtn = $('button:first').clone(true);
$('.wrap').append(newbtn);
})
//获取页面中已有的元素，插入指定位置，相当于剪切和粘贴
$('button').eq(7).click(function(){
$('.wrap').append($('button').eq(0));
})
// 创建元素
function createEl(){
// 创建一个元素
var el = $('<div class="box"></div>');
el.css('background','rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')');
return el;
}
// 随机数
function rand(m,n){
return Math.floor(Math.random()*(n-m+1))+m;
}
</script>
</body>
</html>
初始界面：
效果：
七、经典案例
1.jQuery选项卡
需求：实现鼠标移到显示对于选项卡内容，可参考京东
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0;list-style:none;}
.wrap{
width:300px;
height:300px;
border:1px solid #c4c4c4;
}
.title{
overflow: hidden;
}
.title li{
float:left;
width:100px;
height:50px;
background: #c4c4c4;
text-align:center;
line-height: 50px;
}
.title .active1{
background:pink;
}
.content li{
height:250px;
border:1px solid red;
/*默认给所有的内容隐藏*/
display:none;
}
.content .active2{
display:block;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="title">
<li class="active1">话费</li>
<li>机票</li>
<li>酒店</li>
</ul>
<ul class="content">
<li class="active2">话费的内容</li>
<li>机票的内容</li>
<li>酒店的内容</li>
</ul>
</div>
<script>
// 给每个标题添加移入事件
$('.title li').mouseover(function(){
// 移入谁给谁添加类名
// 给当前移入li添加类名 获取所有同级的li 移除类名
$(this).addClass('active1').siblings().removeClass('active1');
// $(this).index() 获取当前元素的索引值
// console.log($(this).index());
$('.content li').eq($(this).index()).addClass('active2').siblings().removeClass('active2');
})
</script>
</body>
</html>
2.城市地址联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市联动</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
.shi,.xian{
display:none;
}
</style>
</head>
<body>
<select>
<option value="0">--请选择省--</option>
</select>
<select class="shi">
<option value="0">--请选择市--</option>
</select>
<select class="xian">
<option value="0">--请选择县/区--</option>
</select>
<script>
// 定义数据
// 省
var sheng = ['北京市','河南省','黑龙江省'];
// 市
var shi = {
'北京市':['东城区','西城区','朝阳区','昌平区'],
'河南省':['郑州市','洛阳市','新乡市'],
'黑龙江省':['哈尔滨']
}
// 县区
var xian = {
'东城区':['长安街','东单'],
'西城区':['西单'],
'朝阳区':['五方桥','北苑'],
'昌平区':['回龙观','龙泽'],
'郑州市':['二七','管城区','金水区'],
'洛阳市':['洛龙','老城区'],
'新乡市':['牧也','红旗'],
'哈尔滨':['老城区','开发区'],
}
//将省写入第一个select
var str='<option value="0">--请选择省--</option>';
for(i in sheng){
//字符串拼接，将遍历的省信息拼接出来
str+='<option value="'+sheng[i]+'">'+sheng[i]+'</option>';
}
//将字符串写入标签内部
$('select').eq(0).html(str);
//设置value改变事件，从而触发二级联动
$('select').eq(0).change(function(){
var str2='<option value="0">--请选择市--</option>';
//获取当前省的值
var res=$(this).val();
//去市对象里找到对应省名的数组，然后取出每一项进行字符串拼接
for(i in shi[res]){
str2+='<option value="'+shi[res][i]+'">'+shi[res][i]+'</option>';
}
//将拼接好的写入到二级标签
$('select').eq(1).html(str2);
//并且将二级显示出来
$('select').eq(1).css('display','inline');
$('select').eq(2).css('display','none');//如果都选完中途改变，那么县会消失
})
//设置value改变事件，从而触发三级联动
$('select').eq(1).change(function(){
var str3='<option value="0">--请选择县--</option>';
//获取当前的市名字
var res=$(this).val();
//去县对象里找到对应市名的数组，然后取出每一项进行字符串拼接
for(i in xian[res]){
str3+='<option value="'+xian[res][i]+'">'+xian[res][i]+'</option>';
}
//写入标签
$('select').eq(2).html(str3);
//将三级显示出来
$('select').eq(2).css('display','inline');
})
</script>
</body>
</html>
© 著作权归作者所有
举报
发表评论
0/200
