day07 jquery

梦醒时光@

于 2019-08-21 08:30:34 发布

阅读量88

点赞数

分类专栏： web前端文章标签： jquery的使用

本文链接：https://blog.csdn.net/qq_32718195/article/details/99876441

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jquery

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>

梦醒时光@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day07 jquery

文章目录jquery的使用获取jquery对象设置jquery中的css样式选择器过滤选择器关系选择器元素操作css设置文本操作表单值的操作属性操作class属性的操作相关尺寸jquery的使用导入库文件在head标签内添加script标签，再通过script标签的src属性导入jquery库文件<!DOCTYPE html><html><head>...
复制链接

扫一扫

专栏目录