jQuery属性和样式操作
回顾
1. jquery基本使用
<script src="jquery.min.js"></script>
<script>
$(function(){
$('li').css().css().attr().find()
})
</script>
js 原生dom 和 jQuery DOM
$(原生DOM) $(this)
jQuery的本质是 由 原生dom组成 的类数组 对象
2 选择器
# 基本选择器
# 层级选择器
# 基本筛选器
:first
:last
:eq(index) 从0开始
:lt(index) <
:gt(index) >
:odd 奇数
:even 偶数
:not()
# 内容选择器
:contains(text)
:has(选择器)
:empty
:parent
# 可见性选择器
:hidden
:visible
# 属性选择器
[attr!=value] 不等
少了 [attr|=val] [attr~=val]
# 子元素选择器
# 表单选择器
:input
# 表单对象选择器
:disabled
:enabled
:checked
:selected
筛选器（jquery DOM 的方法）
# 过滤
first() $('li').first()
last()
eq(index)
filter(选择器)
not(选择器)
slice(start, end)
# 查找
find(选择器) 后代元素
children([选择器]) 子元素
parent([选择器]) 父元素
parents([选择器]) 祖先元素
parentsUntil([选择器结束条件])
offsetParent() 第一个定位祖先元素
next([选择器])
nextAll([选择器])
nextUntil([选择器])
prev([选择器])
prevAll([选择器])
prevUntil([选择器])
siblings([选择器])
closest([选择器]) 从自己开始向上找，知道找到满足条件的
# 串联
add(选择器)
addBack() $('ul').find('li').addBack()
end() 返回最近破坏性操作 $(dom).find('li').end()
笔记
1 jQuery DOM操作
插入的整个流程：获得点击元素的jQuery对象，并给对象绑定事件，然后定义事件触发时的方法，
方法里先获得元素对象，对象调用不同的方法来实现不同的效果。
1.1 内部插入
这些用法取决于获取的元素是子元素还是父元素，子元素一般使用appendto，prependto这些方法
父元素直接使用append和prepend
append() 在父元素内部插入一个子元素在内部其他元素的后面
appendTo() 子元素插入到指定的元素内已有元素的后面
prepend() 父元素中其他元素的前面插入
prependTo() 子元素插入到父元素其他元素的前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<style>
#box {
width: 800px;
min-height: 300px;
padding: 10px;
border: 2px solid #ccc;
}
#box img {
box-sizing: border-box;
width:100px;
height:100px;
} #box img.active {
border: 2px solid green;
} p {
width: 600px;
padding: 20px;
border: 2px dotted pink;
}
</style>
</head>
<body>
<h1>jQuery DOM 操作</h1>
<hr>
<h2>内部插入</h2>
<button id="append_btn">添加新的图片 append</button>
<button id="appendTo_btn">添加新的图片 appendTo</button>
<button id="prepend_btn">添加新的图片 prepend</button>
<button id="prependTo_btn">添加新的图片 prependTo</button>
<h2>外部插入</h2>
<button id="after_btn">after</button>
<button id="insertAfter_btn">insertAfter</button>
<button id="before_btn">before</button>
<button id="insertBefore_btn">insertBefore</button>
<h2>包裹</h2>
<button id="wrap_btn">wrap</button>
<button id="wrapAll_btn">wrapAll</button>
<button id="wrapInner_btn">wrapInner</button>
<button id="unwrap_btn">unwrap</button>
<h2>替换</h2>
<button id="replaceWith_btn">替换选中的图片</button>
<button id="replaceAll_btn">替换选中的图片repalceAll</button>
<h2>删除</h2>
<button id="empty_btn">empty</button>
<button id="remove_btn">remove 删除选中的图片</button> <br>
<br>
<br>
<br> <div id="box">
<img src="../dist/images_one/1.jpg" alt="">
<img src="../dist/images_one/2.jpg" alt="">
<img src="../dist/images_one/3.jpg" alt="">
<img src="../dist/images_one/4.jpg" alt="">
</div> <img src="../dist/images_one/10.jpg" id="newImg" alt="" style="width:200px"> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){
//内部插入
$('#append_btn').on('click', function(){
//创建img 元素 万能的$
/*var newImg = $('<img>')
newImg.attr('src', '../../dist/images_one/8.jpg');*/ //var newImg = $('<img src="../../dist/images_one/9.jpg">') //给box追加一个子元素
$("#box").append('<img src="../dist/images_one/9.jpg">'); }); $('#appendTo_btn').on('click', function(){
$('<img src="../dist/images_one/9.jpg">').appendTo('#box');
}); $('#prepend_btn').on('click', function(){
$('#box').prepend('<img src="../dist/images_one/10.jpg">')
}); //外部插入
$('#after_btn').on('click', function(){
$('#box').after('<p>我爱你</p>')
})
$('#insertAfter_btn').on('click', function(){
$('<p>你爱我</p>').insertAfter('#box');
})
$('#before_btn').on('click', function(){
$('#box').before('<p>哈哈哈哈</p>')
}); //包裹
//每个img被li元素包裹
$('#wrap_btn').on('click', function(){
$('#box img').wrap('<li>');
})
//移除了父元素，并用一个li元素包裹了所有的img
$('#wrapAll_btn').on('click', function(){
$('#box img').wrapAll('<li>');
})
//被p元素包裹在里面
$('#wrapInner_btn').on('click', function(){
$('#box').wrapInner('<p>');
})
//不被包裹，外部的div元素消失
$('#unwrap_btn').on('click', function(){
$('#box img').unwrap();
});
//替换
$('#replaceWith_btn').on('click', function(){
//alert('ok')
//$('#box img.active').replaceWith('<img src="../../dist/images_one/meinv02.jpg">')
//用newimg替换box下的选中的img。.active表示被选中的
//加clone方法只是复制了图片，原图片还在
$('#box img.active').replaceWith($('#newImg').clone())
})
$('#replaceAll_btn').on('click', function(){
//alert('ok')
//$('#box img.active').replaceWith('<img src="../../dist/images_one/meinv02.jpg">')
//用钱买你指定的图片替换后面指定的所有图片
$('<img src="../dist/images_one/meinv02.jpg">').replaceAll('#box img.active')
}); //删除
//第一个是删除所有的，第二个是删除选中的
$('#empty_btn').on('click', function(){
$('#box').empty();
});
$('#remove_btn').on('click', function(){
$('#box img.active').remove();
}); //克隆 //给所有的图片绑定 事件
$('#box img').on('click', function(){
$(this).toggleClass('active');
})
})
</script>
</body>
</html>
jQuery DOM操作
1.2 外部插入
相当于兄弟元素插入到制定的对象元素前后，不同的元素对象调用不同的方法，看获得的元素对象是谁。
after()
insertAfter()
before()
insertBefore()
1.3 包裹
wrap()
wrapAll()
wrappInner()
unwrap()
1.4 替换
replaceWith() a.replaceWith(b) 用b 替换掉 a
replaceAll()
1.5 删除
empty()
remove()
1.6 克隆
clone()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery TODOList</title>
<style>
.list {
list-style: none;
padding:0;
width:600px;
}
.list li {
padding:20px;
border:1px solid #ccc;
background:#f5f5f5;
margin:5px 0px;
}
.list li::after{
content:'';
display: block;
clear:both;
}
.list li p {
margin:0;
float:left;
}
.list li span {
float:right;
cursor: pointer;
}
input{
width: 300px;
padding:10px;
border:1px solid #ccc;
font-size:16px;
}
button {
padding:10px 20px;
border:1px solid #ccc;
background: #f5f5f5;
} .list li input {
border:none;
padding:0;
outline: none;
background: #f5f5f5;
}
</style>
</head>
<body>
<h1>TODOList</h1>
<hr>
<input type="text" id="content">
<button id="btn">添加</button>
<ul class="list" id="todoList">
<li>
<p>Lorem ipsum dolor sit amet.1</p>
<span>×</span>
</li>
<li>
<p>Lorem ipsum dolor sit amet.2</p>
<span>×</span>
</li>
<li>
<p>Lorem ipsum dolor sit amet.3</p>
<span>×</span>
</li>
<li>
<p>Lorem ipsum dolor sit amet.4</p>
<span>×</span>
</li> </ul> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){
//按钮单击事件
$('#btn').on('click', function(){
$('<li>')
//{$("#content").val()获得输入的值
.append(`<p>${$("#content").val()}</p>`)
.append('<span>×</span>')
.appendTo('#todoList'); }); //给span绑定单击事件 委派 $("#todoList").on('click', 'span', function(){
$(this).parent().remove();
}); //给所有的li>p元素 单击事件
$("#todoList").on('click', 'p', function(){
//$(this).replaceWith('<input type="text" value=>')
$('<input>').val($(this).text()).replaceAll(this);
}); //给li下的 input 绑定 失去焦点的时间
$('#todoList').on('blur', 'input', function(){
$('<p>').text($(this).val()).replaceAll(this);
}) })
</script>
</body>
</html>
jQuery todoList
2 jquery 属性操作
2.1 属性
attr(attrName[, value]) 获取属性的值 或者 设置属性的值 内置属性和自定义属性
prop(attrName[, value]) 获取属性的值 或者 设置属性的值 只能用于内置属性
removeAttr(attrName)
removeProp(attrName)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 属性操作</title>
<style>
#myImg {
display: block;
width: 400px;
height: 300px;
border: 1px solid #ccc;
} </style>
</head>
<body>
<h1>属性操作</h1>
<hr>
<button id="btn">属性操作</button>
<button id="remove_btn">移除属性</button>
<br>
<br>
<img alt="" id="myImg" loadImg='a.png'> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){
$('#btn').on('click', function(){
$('#myImg').attr('src', '../dist/images_one/meinv02.jpg'); //获取属性的值
console.log($('#myImg').attr('src'))
console.log($('#myImg').attr('id'))
console.log($('#myImg').prop('title')); //专门设置或者获取 元素的内置属性
console.log($('#myImg').attr('loadImg')); //专门设置或者获取 元素的内置属性 }); $('#remove_btn').on('click', function(){
$('#myImg').removeAttr('src');
//$('#myImg').attr('src', '');
})
})
</script>
</body>
</html>
属性操作
2.2 类
addClass()
removeClass()
toggleClass()
hasClass() 返回布尔值 <p class="item active"> p.hasClass('item')
2.3 文本值
html([html]) 等同于innerHTML 没有参数 就是获取， 有参数就是设置
text([text]) 等同于innerText 获取或者设置
val([val]) 用于表单控件 设置或获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义数作用 图片懒加载</title>
<style>
.imglist img {
width: 400px;
height: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>图片懒加载</h1>
<hr> <div class="imglist">
<img loadpic='../dist/images_one/meinv02.jpg'>
<img loadpic='../dist/images_one/2.jpg'>
<img loadpic='../dist/images_one/3.jpg'>
<img loadpic='../dist/images_one/4.jpg'>
</div> <script src="../jquery-3.3.1.js"></script>
<script> //console.log($('.imglist img').attr('loadpic'))
//单次定时
setTimeout(function(){
$('.imglist img').each(function(index, item){
$(item).attr('src', $(item).attr('loadpic'))
})
}, 2000)
</script>
</body>
</html>
自定义属性实例
3 jquery 样式操作
3.1 CSS操作
css('属性', '值')
css('属性')
3.2 元素位置
offset() 相对于视口 可以获取可以设置 返回对象{left: ,top:}
position() 相对于第一个定位的祖先元素，margin减掉。 只能获取
scrollLeft() 控制里面内容的滚动 水平
scrollTop() 控制里面内容的滚动 垂直
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式操作</title>
<style>
#box {
width: 400px;
height: 200px;
border:2px solid #ccc;
position: relative;
} .inner {
width:100px;
height:100px;
/*margin:50px;*/
background: pink;
}
</style>
</head>
<body>
<h1>同志加油</h1>
<hr>
<button id="btn">设置位置</button>
<div id="box">
<div class="inner"></div>
</div> <script src="../jquery-3.3.1.js"></script>
<script> console.log($('#box').css('width')); //元素的位置
console.log($('.inner').offset())
//以视口 为参照
console.log($('.inner').offset().left, $('.inner').offset().top) console.log($('.inner').position())
console.log($('.inner').position().left, $('.inner').position().top) $('#btn').click(function(){
//只有offset 才能设置
$('.inner').offset({left:10, top:10})
})
</script>
</body>
</html>
jQuery样式操作
3.3 尺寸
width() / height()
innerWidth() / innerHeight()
outerWidth() / outerHeight()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素尺寸</title>
<style>
#box {
width:200px;
height:300px;
padding:15px;
border: 3px solid #ccc;
}
</style>
</head>
<body>
<h1>获取元素尺寸</h1>
<hr> <div id="box"></div> <script src='../jquery-3.3.1.min.js'></script>
<script>
$(function(){
console.log($('#box').width(), $('#box').height()) //内容的大小
console.log($('#box').innerWidth(), $('#box').innerHeight()) //内容大小+padding
console.log($('#box').outerWidth(), $('#box').outerHeight()) //内容大小+padding+border 实际大小 //设置
$('#box').width(300); //设置 内容的宽是300
$('#box').outerWidth(300) //设置 盒子 总的宽 是 300 })
</script>
</body>
</html>
jQuery获取元素的尺寸
小米网页需要用到的滚动操作和轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动</title>
<style>
#box {
width:800px;
height:200px;
border:2px solid orange;
overflow: hidden;
}
.wrapper {
width:2200px;
}
#box p {
margin:0;
width:198px;
height:198px;
float:left;
border:1px solid #ccc;
background: #369;
color:#fff;
} </style>
</head>
<body>
<div id="box">
<div class="wrapper">
<p>lorem1</p>
<p>lorem2</p>
<p>lorem3</p>
<p>lorem4</p>
<p>lorem5</p>
<p>lorem6</p>
<p>lorem7</p>
<p>lorem8</p>
<p>lorem9</p>
<p>lorem10</p>
<p>lorem11</p>
</div>
</div> <br> <button id="left_btn"> < </button>
<button id="right_btn"> > </button> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){ $('#left_btn').on('click', function(){
//console.log($('#box').scrollLeft())
//$('#box').scrollLeft(800);//是把 scrollLeft 设置为800 $('#box').scrollLeft($('#box').scrollLeft() + 800);
}); $('#right_btn').on('click', function(){
$('#box').scrollLeft($('#box').scrollLeft() - 800 )
})
})
</script>
</body>
</html>
滚动操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图效果</title>
<style>
.play {
margin: 100px auto;
width: 1226px;
height: 460px;
border: 1px solid #999;
position: relative;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.play img {
display: block;
width: 1226px;
height:460px;
}
.imglist li {
position: absolute;
left:0;
top:0;
opacity: 0;
transition: opacity 1s;
}
.imglist li.current { opacity: 1;
} .control-list {
position: absolute;
bottom:20px;
right:20px;
}
.control-list span {
font-size:0px;
float:left;
margin-right:5px;
width:12px;
height:12px;
border:1px solid #999;
border-radius: 7px;
background: #999;
cursor: pointer;
}
.control-list span.current {
background: #fff;
}
.slide {
position: absolute;
top:50%;
transform: translate(0, -50%);
width:40px;
height:80px;
background:rgba(0,0,0,.6);
color:#fff;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 80px;
cursor: pointer;
opacity: .5;
transition: .3s;
}
.slide:hover {
opacity: 1;
}
.slide-left{
left:0;
}
.slide-right {
right:0;
}
</style>
</head>
<body>
<div id="play" class="play"> <ul class="imglist">
<li class="current">
<a href="#">
<img src="./images/play01.jpg" alt="">
</a>
</li> <li>
<a href="#">
<img src="./images/play02.jpg" alt="">
</a>
</li> <li>
<a href="#">
<img src="./images/play03.jpg" alt="">
</a>
</li> <li>
<a href="#">
<img src="./images/play04.jpg" alt="">
</a>
</li> <li>
<a href="#">
<img src="./images/play05.jpg" alt="">
</a>
</li>
</ul> <div class="control-list">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div> <div class="slide-list">
<span class="slide slide-left"><</span>
<span class="slide slide-right">></span>
</div> </div> <script src="../jquery-3.3.1.js"></script>
<script>
//轮播图效果
$(function(){
var m = 0; //循环变量
var delay = 3000; //轮播的时间间隔
var length = 5; //轮播的数量 //设置定时
var runTime = setInterval(runPlay, delay); //鼠标悬浮 定时停止
$('#play').on('mouseenter', function(){
clearInterval(runTime);
}).on('mouseleave', function(){
runTime = setInterval(runPlay, delay)
}); //给控制按钮 绑定 单击事件
$('.control-list span').on('click', function(){
//console.log($(this).index())
m = $(this).index();
controlImage(m);
}); //向右
$('.slide-right').on('click', function(){
m ++;
if (m >= length) {
m = 0;
}
controlImage(m)
}); //向左 上一个
$('.slide-left').on('click', function(){
m --;
if (m < 0) {
m = length-1
}
controlImage(m)
}) //定时函数
function runPlay() {
//循环变量累加
m ++;
//判断
if (m >= length) {
m = 0;
}
//调用函数 控制图片
controlImage(m)
} //控制图片的变化
// n表示 要第几个显示
function controlImage(n) {
$('.imglist li').removeClass('current').eq(n).addClass('current');
$('.control-list span').removeClass('current').eq(n).addClass('current');
} })
</script>
</body>
</html>
轮播图
jQuery属性和样式操作的更多相关文章
- DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...
- 前端开发之jQuery属性和文档操作
主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作, ...
- Jquery选择器与样式操作
jquery选择器 jquery用法思想一 选择某个网页元素,然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择 ...
- jQuery属性，方法操作
addClass() 向匹配的元素添加指定的类名.attr() 设置或返回匹配元素的属性和值.hasClass() 检查匹配的元素是否拥有指定的类.html() 设置或返回匹配的元素集合中的 HTM ...
- jquery 属性与css操作
属性1.属性 1.1 attr(name|properties|key,value|key,fn) 1) 获取属性值 $("img").attr(&quo ...
- jquery属性与样式
1.attr()与prop() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图片的地址. 操作特性的DOM方法主 ...
- Jquery属性操作（入门二）
********JQuery属性相关的操作******** 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个 ...
- jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
随机推荐
- 关于ubuntu 16.04 docker常用命令
1.sudo docker ps -a 查看当前docker实例的信息: CONTAINER ID IMAGE COMMAND ...
- hdu 3932 Groundhog Build Home —— 模拟退火
题目:http://acm.hdu.edu.cn/showproblem.php?pid=3932 找一个位置使距离最远的点的距离最小: 上模拟退火: 每次向距离最远的点移动,注意判断一下距离最远的点 ...
- bzoj3489
kdtree 3维kdtree,就是三个维度轮换着切,我们把每个元素看成一个点,坐标是上次出现的位置,下次出现的位置,自己的位置,第一个<l,第二个>r,第三个[l,r],然后kdtree ...
- office2007下载地址
thunder://QUFodHRwOi8vNDYuZHVvdGUub3JnOjgwODAvb2ZmaWNlMjAwN3Byby56aXBaWg==thunder://QUFodHRwOi8vNTEu ...
- 1.1- 1.2 hive入门
一.hive是什么 由Facebook开源用于解决海量结构化日志的数据统计: Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射成一张表, 并提供类SQL查询功能: 构建在Had ...
- UVa 11825 Hackers' Crackdown (状压DP)
题意:给定 n 个计算机的一个关系图,你可以停止每台计算机的一项服务,并且和该计算机相邻的计算机也会终止,问你最多能终止多少服务. 析:这个题意思就是说把 n 台计算机尽可能多的分成一些组,使得每组的 ...
- 【WIP_S9】图论算法
创建: 2018/06/01 图的概念 有向边 有向图 无向边 无向图 点的次数: 点连接的边的数量 闭路: 起点和重点一样 连接图: 任意两点之间都可到达 无闭路有向图: 没有闭路的有向图 森林: ...
- Swift3.0 Set
set的简单的使用方法 //创建一个空set var letters = Set<Character>() //数组字面量创建set,只能存放string var setColors:Se ...
- 51nod1212【最小生成树kruskal算法】
思路: 利用破圈法. #include <bits/stdc++.h> using namespace std; typedef long long LL; const int N=1e3 ...
- oracle的日期数据类型
https://blog.csdn.net/qq_33573235/article/details/78154928(转)