jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒...

mac2022-06-30 74

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>  <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" />男  <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=""/>打豆豆  <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>

转载于:https://www.cnblogs.com/dengl/p/11366605.html