文章目录
一、jQuery是什么
- 一、jQuery是什么
- 二、JQuery的常见选择器
- 三、JQuery的元素操作
- 四、相关尺寸函数
- 五、常用的事件方法
- 1. 绑定事件的两种方式
- 2.解除绑定
- 六、节点操作
- 七、经典案例
- 1.jQuery选项卡
- 2.城市地址联动
1.jQuery的特点
- jQuery 是一个 JavaScript 函数库。
- jQuery是一个轻量级的“写得少，做得多”的JS库
- jQuery 很容易学习
- jQuery还提供了大量的插件
- jQuery版本2以上不支持低版本浏览器
2.导入jquery库
在使用jQuery的时候，首先需要导入jQuery的库，我们在head标签中导入库
DOCTYPE html>
111
console.log($);
如果不报错则表示导入成功
二、JQuery的常见选择器使用jQuery的便利
- 在jQ中我们获取元素的方法变得比较简单，例如：
$('#id名')，$('.标签名')，$('class名') - 可以通过元素
css('属性名’,'属性值')修改属性
选择器代码：
DOCTYPE html>
第一个完整的静态页面
*{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;
}
我是logo
首页
在线视频
QQ音乐
百度文库
员工信息
查看这里
关于我们
COPYRIGHT©哈哈哈
// 基本选择器 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');
DOCTYPE html>
元素的操作
.item1{
border:3px solid red;
}
.item2{
font-size:30px;
}
//设置css样式
//一次设置一个样式
// $('.box').css('background','yellow');
// $('.box').css('width','200px');
// $('.box').css('height','200px');
// 一次设置多个样式,传入一个对象
$('.box').css({background:'yellow',height:'200px'})
//----------------------------------------------------------
//文本内容的操作（注意会将原值覆盖）
//html,会解析标签
$('.box').html('哈哈哈');
//text，不会解析标签
// $('.box').text('嘻嘻嘻');
//----------------------------------------------------------
//表单值的操作-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');
DOCTYPE html>
Document
*{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;
}
1
2
// 获取元素相对文档的偏移位置
// 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())
在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('我出来啦')}
})
当我们不需要事件时候，可以使用off（）方法解除所有绑定事件
$('button').off();
案例-鼠标拖拽：实现一个div块会随着鼠标的按下而移动
DOCTYPE html>
Document
*{margin:0;padding:0;}
.box{
width:200px;
height:200px;
background:pink;
position: absolute;
}
on方法绑定
// 当用户在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');
})
DOCTYPE html>
Document
.wrap{
width:500px;
height:500px;
border:1px solid red;
}
.box{
width:100px;
height:100px;
background:red;
border-radius: 50%;
float:left;
}
append()
prepend()
after()
before()
empty()
remove()
clone()
获取页面元素直接插
// 将元素插入到指定元素内部的尾部
$('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 = $('');
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;
}
初始界面： 
效果： 
需求：实现鼠标移到显示对于选项卡内容，可参考京东
DOCTYPE html>
Document
*{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;
}
话费
机票
酒店
话费的内容
机票的内容
酒店的内容
// 给每个标题添加移入事件
$('.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');
})
DOCTYPE html>
城市联动
.shi,.xian{
display:none;
}
--请选择省--
--请选择市--
--请选择县/区--
// 定义数据
// 省
var sheng = ['北京市','河南省','黑龙江省'];
// 市
var shi = {
'北京市':['东城区','西城区','朝阳区','昌平区'],
'河南省':['郑州市','洛阳市','新乡市'],
'黑龙江省':['哈尔滨']
}
// 县区
var xian = {
'东城区':['长安街','东单'],
'西城区':['西单'],
'朝阳区':['五方桥','北苑'],
'昌平区':['回龙观','龙泽'],
'郑州市':['二七','管城区','金水区'],
'洛阳市':['洛龙','老城区'],
'新乡市':['牧也','红旗'],
'哈尔滨':['老城区','开发区'],
}
//将省写入第一个select
var str='--请选择省--';
for(i in sheng){
//字符串拼接，将遍历的省信息拼接出来
str+=''+sheng[i]+'';
}
//将字符串写入标签内部
$('select').eq(0).html(str);
//设置value改变事件，从而触发二级联动
$('select').eq(0).change(function(){
var str2='--请选择市--';
//获取当前省的值
var res=$(this).val();
//去市对象里找到对应省名的数组，然后取出每一项进行字符串拼接
for(i in shi[res]){
str2+=''+shi[res][i]+'';
}
//将拼接好的写入到二级标签
$('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='--请选择县--';
//获取当前的市名字
var res=$(this).val();
//去县对象里找到对应市名的数组，然后取出每一项进行字符串拼接
for(i in xian[res]){
str3+=''+xian[res][i]+'';
}
//写入标签
$('select').eq(2).html(str3);
//将三级显示出来
$('select').eq(2).css('display','inline');
})
