jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条
jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条
一丶jQ操作标签内文本
html() 标签元素中的内容
/** 替换的内容可以使一个js对象,jq对象,文本 **/
/* 获取值:获取选中标签元素的所有内容 ,包括标签*/
$('ul').html()
"
<li>1</li>
<li>2</li>
<li>3</li>
"
/* 设置值:设置该元素的所有内容,会替换掉标签中原来的内容 */
$('#box').html('<a>哈哈哈</a>')
text() 标签元素的文本内容
/** 替换的内容都会变成文本样式,html标签不会渲染,jsjq对象则是地址 **/
/* 获取值:获取选中标签元素的文本内容*/
$('ul').text()
"
1
2
3
"
/* 设置值:设置该元素的所有文本内容 */
$('ul').text('替换了所有内容')
jQuery.fn.init [ul, prevObject: jQuery.fn.init(1)]
//PS:
text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
二丶jQ操作文档标签
插入标签
子元素可以为：stirng | element（js对象） | jquery元素
/* append 和 appendTo : 追加到某个元素之后 */
//父元素.append(子元素)
$('ul').append('<li>抽象类1</li>') // jq对象后,末尾添加 子对象
//子元素.appendTo(父元素)
$('<li>抽象类2</li>').appendTo('ul') // 子对象必须转成jq对象 ,末尾添加 Jq对象后
/* prepend 和 prependTo : 添加到某个元素之前 */
//父元素.prepend(子元素)
$('ul').prepend('<li>抽象类1</li>') // jq对象前,添加 子对象
//子元素.prependTo(父元素)
$('<li>抽象类2</li>').prependTo('ul') // 子对象必须转成jq对象 ,添加 Jq对象前
/* after 和 insertAfter : 兄弟元素之后插入某个元素/内容 */
//兄弟元素.after(要插入的兄弟元素)
$('#l2').after('<li>哈哈</li>')
//要插入的兄弟元素.insertAfter(兄弟元素)
$('<li>哈哈2</li>').insertAfter('#l2')
/* before 和 insertBefore : 兄弟元素之前插入某个元素/内容 */
//兄弟元素.before(要插入的兄弟元素)
$('#l2').before('<li>哈哈3</li>')
//要插入的兄弟元素.insertBefore(兄弟元素)
$('<li>哈哈4</li>').insertBefore('#l2')
//PS:
如果追加的jquery对象原本在文档树中，那么这些元素将从原位置上消失。简言之，就是移动操作。
示例代码:👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../day49 JQ/jquery3.4.1.js"></script>
</head>
<body>
<ul>
<li>唱</li>
<li id="l2">跳</li>
<li>rap</li>
</ul>
</body>
<script>
var li=document.createElement('li')
// console.log($('ul').text()) // 查询所有文本内容
// console.log($('ul').html()) // 查询所有文本内容+标签
$('ul').append('<li>抽象类1</li>') // jq对象后,末尾添加 子对象
$('<li>抽象类2</li>').appendTo('ul') // 子对象必须转成jq对象 ,末尾添加 Jq对象后
//
$('ul').prepend('<li>抽象类1</li>') // jq对象前,添加 子对象
$('<li>抽象类2</li>').prependTo('ul') // 子对象必须转成jq对象 ,添加 Jq对象前
$('#l2').after('<li>哈哈</li>') //
$('<li>哈哈2</li>').insertAfter('#l2') //
$('#l2').before('<li>哈哈3</li>') //
$('<li>哈哈4</li>').insertBefore('#l2') //
</script>
</html>
删除标签
//删除节点后，事件也会删除（简言之，删除了整个标签）
$(selector).remove(); //被删掉的对象可以做返回值
// 删除节点后，事件会保留
$(selector).detach(); //被删掉的对象可以做返回值
// 清空选中元素中的所有后代节点
$(selector).empty();
示例代码:👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery3.4.1.js"></script>
</head>
<body>
<button>按钮</button>
</body>
<script>
$('button').click(function () {
alert('123')
})
</script>
</html>
修改标签
//选择器被替换：将所有匹配的元素替换成指定的string、js对象、jquery对象。
/* replacWith : 指定jq对象元素被替换成指定的 string,js对象,jq对象 */
$(选择器).replaceWith(content)
/* replaceAll: 内容(string,jq对象,js对象) 替换 指定的jq对象 */
$(content). replaceAll(选择器)
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery3.4.1.js"></script>
</head>
<body>
<ul>
<li >一</li>
<li >二</li>
<li >三</li>
</ul>
</body>
<script>
//创建一个sp对象
var sp=document.createElement('span')
sp.innerText='alex'
// replaceWith
$('li:first').replaceWith(sp);
//replaceAll
$(sp).replaceAll($('li:last'))
</script>
</html>
clone()克隆标签
// 克隆匹配的DOM元素 , 当 clone(true) 克隆这个标签的所有,包括事件.
$(选择器).clone();
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery3.4.1.js"></script>
</head>
<body>
<button>点击</button>
</body>
<script>
$('button').click(function () {
// this 指的是当前的这个对象
var new_btn= $(this).clone()
$(new_btn).insertAfter($(this))
})
// 当 clone(true) 克隆这个标签的所有,包括事件
$('button').click(function () {
// this 指的是当前的 js对象
var new_btn= $(this).clone(true)
//insertAfter 添加到button标签之后
$(new_btn).insertAfter($(this))
})
</script>
</html>
三丶jQ操作属性
attr()获取/设置属性值:
/* 获取值 */
//语法: $('选择器').attr('属性名')
$('div').attr('id') //获取div的id属性值
/* 设置值 */
//设置一个值
//语法: $('选择器').attr('属性名','属性值')
$('div').attr('class','box') //为div标签添加box类
//设置多个值
//语法: $('选择器').attr({'属性名1':'属性值2','属性名2':'属性值2'})
$('div').attr({'class':'box','id':'d1'}) //为div标签添加box类和id
removeAttr()移除属性:
/* 移除属性 */
//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');
//删除多个属性
$('#box').removeAttr('name class');
prop():
/* 查看属性 */
// 语法: $('选择器').prop('属性')
$('span').prop('title');
/* 修改属性,属性必须已经存在标签上 */
//修改单个值
// 语法: $(selector).prop(property,value)
$('div').prop('id','1bsad')
// 修改多个属性
// 语法: $(selector).prop({property:value, property:value,...})
$('div').prop({'id':'1bsad','title':'你好啊'})
// checked篇章
$('input').attr('checked')
"checked"
$('input').prop('checked')
true
$('input').prop('cheched',false) //设置取消选中
综合示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery3.4.1.js"></script>
</head>
<body>
<!--<div title="abc" id="123"></div>-->
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女
<input type="checkbox" name="hobby" value="1" >唱
<input type="checkbox" name="hobby" value="2" >跳
<input type="checkbox" name="hobby" value="3" >rap
</body>
<script>
var div=$('div');
//获得属性值
var v1=div.attr('id')
console.log(v1)
//设置属性值
div.attr('name','ab');//单个
div.attr({'name':'ab','value':'123'});//多个
// 移除属性
div.removeAttr('id');//移除一个属性
div.removeAttr('id title') ; // 移除多个属性
//prop 查看属性
console.log(div.prop('id'))
//prop 修改属性,属性必须已经存在标签上
// 一个值
$('div').prop('name','1bsad')
// 多个值
$('div').prop({'id':'1bsad','title':'你好啊'})
</script>
</html>
四丶jQ操作class属性
addClass()添加类:
/* 指定选择器元素添加指定的类名 */
$('div').addClass('box'); //添加一个
$('div').addClass('box c2'); //添加多个
removeClass()移除类:
/* 从所有匹配的元素中删除全部或者是指定的类 */
$('div').removeClass('box'); //移除box类
$('div').removeClass('box c2'); //移除box类 和c2类
toggleClass()类的切换:
/* toggleClass() :存在就删除, 不存在就添加上 */
$('div').toggleClass('c2');
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
综合示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.active {
background-color: red;
}
.c1{
width: 200px;
background-color: cornflowerblue;
}
.c2{
background-color: gray;
}
</style>
<script src="jquery3.4.1.js"></script>
</head>
<body>
<div class=""></div>
<button>点击</button>
</body>
<script type="text/javascript">
$('button').click(function () {
// $('div').addClass('c1') ; // 添加一个样式
// $('div').addClass('c1 c2'); //添加多个样式
// $('div').removeClass('c1') // 移除指定样式
// $('div').removeClass() // 移除所有样式
// 点击切换
$('div').toggleClass('c2')
})
</script>
</html>
五丶jQ操作表单value
val()获取值:input,textarea,select等
/* 获取值: 用于表单控件中获取值 */
$('选择器').val()
/* 设置值: */
$('选择器').val('新值')
//PS:
对于选择框 : 单选 多选 下拉选择
设置选中的值需要放在数组中 :
$(':radio').val([1])
$(':radio').val([1,2,3])
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="112" />男
<!-- 设置cheked属性表示选中当前选项 -->
<input type="radio" name="sex" value="11" checked="" />女
<input type="radio" name="sex" value="11" />gay
<input type="checkbox" value="a" checked=""/>吃饭
<input type="checkbox" value="b" />睡觉
<input type="checkbox" value="c" checked=""/>打豆豆
<!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
<select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2" selected="">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
</body>
<script type="text/javascript" src="jquery3.4.1.js"></script>
<script type="text/javascript">
$(function(){
// 一、获取值
//1.获取单选框被选中的value值
console.log($('input[type=radio]:checked').val())
//2.复选框被选中的value,获取的是第一个被选中的值
console.log($('input[type=checkbox]:checked').val())
//3.下拉列表被选中的值
var obj = $("#timespan option:selected");
// 获取被选中的值
var time = obj.val();
console.log(time);
// 获取文本
var time_text = obj.text();
console.log("val:"+time+" text"+ time_text );
//4.获取文本框的value值
console.log($("input[type=text]").val())//获取文本框中的值
// 二.设置值
//1.设置单选按钮和多选按钮被选中项
$('input[type=radio]').val(['112']);
$('input[type=checkbox]').val(['a','b']);
//2.设置下拉列表框的选中值，必须使用select
/*因为option只能设置单个值，当给select标签设置multiple。
那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
*/
$('select').val(['3','2'])
//3.设置文本框的value值
$('input[type=text]').val('试试就试试')
})
</script>
</html>
六丶jQ操作css样式
css(属性名,属性值):
/* 获取css的某个样式的值 */
$('div').css('color')
/* 直接修改css的属性 */
$('div').css('color','red') ; //单个值
$('div').css({'color':'red','background-color':'lightgray'}) ; //单个值
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery3.4.1.js"></script>
<style>
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
<input type="text" name="a" value="123">
</body>
<script>
// val
var val= $('input').val();
console.log(val)
//css
$('div').css('background-color','red')
</script>
</html>
七丶jQ操作盒子样式
设置值:变得永远是content的值
内容:
宽度(width)和高度(height)
/* 宽度 */
//获取宽度 返回匹配元素中第一个元素的宽，一个没有单位的数值
$('选择器').width()
//设置宽度
$('选择器').width( value )
/* 高度 */
//获取高度 返回匹配元素中第一个元素的高，一个没有单位的数值
$('选择器').height()
//设置高度
$('选择器').height( value )
内容+padding:
宽度(innerWidth)和高度(innerHeight)
/* 内部宽 */
// 获取
$('选择器').innerWidth();
//设置
$('选择器').innerWidth(value);
/* 内部高 */
// 获取
$('选择器').innerHeight();
//设置
$('选择器').innerHeight(value);
内容+padding+border:
宽度(outerWidth)和高度(outerHeight)
// 外部宽
.outerWidth() //获取第一个匹配元素 ：内容+padding+border的宽
.outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽
.outerWidth(value) //设置多个，调整的是“内容”的宽
//外部高
.outerHeight() //第一个匹配元素：获取内容+padding+border的高
.outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高
.outerHeight( value ) //设置多个，调整的是“内容”的高
简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
*{
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: rebeccapurple;
padding: 10px;
margin: 10px;
border: 10px solid #ffd19b;
}
</style>
<script src="jquery3.4.1.js"></script>
</head>
<body>
<div></div>
</body>
<script>
// 内容的宽 width
// $('div').width(); //获取原本宽度
// $('div').width(200); //设置宽度
//内容的高 height
// $('div').height(); //获取原本高度
// $('div').height(200); //设置高度
// 内容 + padding
// 宽度
// $('div').innerWidth()
// 高度
// $('div').innerHeight()
// 内容+padding+border
$('div').outerWidth() //140
$('div').outerWidth(true) //160
$('div').outerHeight()
$('div').outerHeight(true)
</script>
</html>
八丶滚动条距离属性
$(window).scrollLeft()
$(window).scrollTop()
// 水平方向
.scrollLeft() //获取
.scrollLeft( value )//设置
// 垂直方向
.scrollTop() //获取
.scrollTop( value ) //设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 2000px;
height: 2000px;
}
</style>
<script src="jquery3.4.1.js"></script>
</head>
<body>
<div>1</div>
</body>
<script>
$(window).scrollLeft()
$(window).scrollTop()
</script>
</html>
