jquery的使用
导入库文件
在head标签内添加script标签,再通过script标签的src属性导入jquery库文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery的导入</title>
<!-- 导入jquery库文件 -->
<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<script>
// 检测是否导入成功,如果没报错 代表导入成功
console.log($);
</script>
</body>
</html>
获取jquery对象
原生js获取对象
id = "item1" id选择器
var oDiv = document.getElementById('item1');
class = "logo" class选择器
var oDiv = document.getElementsByClassName('logo');
<li></li> 标签选择器
var oDiv = document.getElementsByTagName('li');
获取jquery对象
id = "item1" id选择器
$('#item1')
class = "logo" class选择器
$('.logo')
<li></li> 标签选择器
$('li')
设置jquery中的css样式
原生js中的css样式
格式:对象 . style . 属性 = "属性值 "
oDiv.style.border="1px solid red";
jquery中的css样式
格式:对象 . css(‘属性’,‘属性值’)
$('#item').css('border','1px solid red');
选择器
过滤选择器
:first 获取第一个元素
:last 获取最后一个元素
:eq(index) 获取指定索引的元素
关系选择器
children() 获取所有的(直接)子元素
prev() 获取上一个同级元素
next() 获取下一个同级元素
siblings() 获取所有的同级元素,但是不包括元素自己
parent() 获取父元素
parents() 获取先辈元素
find() 在父元素中查找指定的子元素
必须传参数,如果不传参数没有效果
元素操作
css设置
使用css()方法来操作样式
- 一次设置一个样式
class="box"
$('.box').css('width','200px');
$('.box').css('height','200px');
$('.box').css('background-color','red');
- 一次设置多个样式
class="box"
$('.box').css({width:'200px',height:'200px',backgroundColor:'red'});
文本操作
原生js中是属性,jquery中是调用方法。
innerHTML---->html()
innerText---->text()
jquery对象 调用html() text()方法
jquery对象调用 html()方法
$('.box').html('<h2>zhangsan</h2>');
jquery对象调用 text()方法
$('.box').text('<h2>zhangsan</h2>');
表单值的操作
value属性---->val( )方法
<input type="text" value="uuu">
表单值的操作
获取
console.log($('input').val());// 在浏览器窗口打印获取到的value属性值
设置
$('input').val('lll');// 设置<input>标签的value属性值
val( )方法中不传参数时,获取表单值
传参数时,设置表单值
属性操作
attr( ) 获取/设置 属性
removeAttr( ) 删除属性
<img src="http://b-ssl.duitang.com/uploads/item/201409/02/20140902145158_e4eyF.jpeg" alt="">
// 属性操作 attr() removeAttr()
// 获取 属性的值
console.log($('img').attr('src'));// 在浏览器控制台打印<img>标签中src属性的值
// 设置 属性的值
// 一次设置一个
$('img').attr('alt','aa');
// 一次设置多个属性的值
$('img').attr({alt:'aa',title:'tt'});
// 删除属性 removeAttr()
$('img').removeAttr('title');
class属性的操作
addClass( ) – 添加类名
removeClass( ) – 删除类名
<div class="box">class属性的操作</div>
$('.box').css({width:'200px',height:'200px',backgroundColor:'#0f0'});// 给<div>标签设置css样式
// class属性的操作
// addClass() 给.box追加类名 在原来的基础上追加 不会删除原来的类名
$('.box').addClass('item1 item2');// 添加类名 item1 item2
// 添加结果<div class="box item1 item2" style="width: 200px; height: 200px; background-color: rgb(0, 255, 0);">class属性的操作</div>
//removeClass() 删除类名 如果不传参数会将所有的类名都删掉
$('.box').removeClass('item2');// 删除类名 item2
// 删除结果<div class="box item1" style="width: 200px; height: 200px; background-color: rgb(0, 255, 0);">class属性的操作</div>
相关尺寸
offset( ) 获取元素相对文档的偏移位置,返回的是一个包含top和left属性的对象
获取文档的滚动距离
scrollTop( ) 获取文档垂直方向的滚动距离,返回的是一个数字
scrollLeft( ) 获取文档水平方向的滚动距离
获取元素的宽度和高度
width( ) height( ) 只获取元素的内容大小 ( content )
innerWidth( ) innerHeight( ) 获取元素的 内容大小 和 内间距(padding) 大小,不包含边框
outerWidth( ) outerHeight( ) 获取元素的 内容大小 和 内间距 大小和边框(border)大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相关尺寸</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-color:#0f0;
padding:20px;
border:3px solid red;
}
.box2{
width:300px;
}
</style>
<body>
<div class="box1">1</div>
<div class="box1 box2">2</div>
<script>
// 获取元素相对文档的偏移位置
// offset() 返回的是一个包含 top和left 属性的对象
// 获取box1相对于文档的位置
// console.log($('.box1').offset());// {top:0,left:0}
// console.log($('.box2').offset());// {top:246,left:0}
// 获取文档的滚动距离
// scrollTop() 获取文档的垂直方向的滚动距离 返回的是一个数字
// console.log($(document).scrollTop());
// scrollLeft() 文档的水平方向的滚动距离
// console.log($(document).scrollLeft());
// 获取元素的宽度和高度
// width() height() 如果是多个元素对象获取的是第一个元素的宽高 只获取元素的内容大小(content)
console.log($('.box1').width());// 200
console.log($('.box1').height());// 200
// innerWidth() innerHeight() 获取元素内容大小和内间距(padding)大小 不包含边框
console.log($('.box1').innerWidth());// 240
console.log($('.box1').innerHeight());// 240
// outerWidth() outerHeight() 获取元素内容大小 和 内间距大小 和 边框 (border)大小
console.log($('.box1').outerWidth());// 246
console.log($('.box1').outerHeight());// 246
// 获取浏览器窗口的大小
console.log($(window).width());
// 获取文档的宽高
console.log($(document).width());// 2500
console.log($(document).height());// 2000
</script>
</body>
</html>