jQuery操作元素属性操作样式操作样式类操作HTML代码以及其他操作 [学完你还不会吗]

Posted 2021-08-29 星河梦~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery操作元素属性操作样式操作样式类操作HTML代码以及其他操作 [学完你还不会吗]相关的知识，希望对你有一定的参考价值。

操作元素属性

操作元素的属性即操作元素的自定义属性和固有属性

具体操作有：

（1）获取元素的属性值

$(selector).attr(属性名)

var txt=$('#d1').attr('name')    //获取元素的name属性
console.log(txt)

（2）设置元素的属性值

以对象的方式设置属性值

$(selector).attr({'属性名':'属性值'})

以key-value的方式设置属性值

$(selector).attr('属性名','属性值')

以回调函数的方式设置属性值

$(selector).attr('属性名',function()){
	return '值'
})

例如：

<img />

$('img').attr({'src':'../images/8.png.jpeg'});

$('img').attr('src',function(){
    return '../images/8.png.jpeg'    //回调函数设置属性
})

（3）删除元素属性：removeAttr

$(selector).removeAttr('属性名')

例如：

$('#d1').removeAttr('name')   //删除name属性

操作样式

具体操作如下：

（1）获取样式属性的值

$(selector).css('样式属性名')

例如：

div{
      width: 200px;
       height: 200px;
       background-color: red;
   }

<div>样式</div>
var c=$('div').css('backgroundColor')   //注意样式属性的写法
console.log(c)     //输出：rgb(255, 0, 0)

（2）设置样式属性的值

以传入对象的方式设置样式

$(selector).css({'样式属性'：'值'})

以给函数传值的方式设置样式

$(selector).css('样式属性名'，'属性值')

例如：

$('div').css({  
   'width':'200px',
   'height':'200px',
})

$('div').css('color','white')

操作样式类

具体操作如下：

（1）添加样式类

$(selector).addClass(样式类名)

（2）删除样式类

$(selector).removeClass(样式类名)

（3）判断元素是否含有给定的样式类

$(selector).hasClass(样式类名)

（4）交替添加（删除） 样式类

$(selector).toggleClass(样式类名)

练习:判断用户名是否可用

.ok{
	color:green
}
.err{
	color:red
}

<label>
	用户名：
	<input type="text" id="username">
	<span id="msg"></span>
</label>
<p>西安</p>

$(function(){
	$('#username').blur(function(){
		var name=$('#username').val()    //获取用户名
		if(name==='abc'){
			S('#span').html('用户名可用')
			if($('#msg').hasClass('err')){
				$('#msg').removeClass('err')
			}
			$('msg').addClass('ok')
		}else{
			S('#span').html('用户名不可用')
			if($('msg').hasClass('ok')){
				$('msg').removeClass('ok')
			}
			$('msg').addClass('err')
		}
	})

	$('p').click(function(){
		$('p').toggleClass('ok')  //交替添加属性
	})
})

操作HTML代码

操作HTML代码：作用类似于innerHTML

具体操作如下：

（1）获取html代码：

$(selsetor).html()

（2）设置html代码：（设置/写入内容）

$(selector).html('html代码')

例如：

$('div').html('<h2>杭州</h2>')    //向标签中添加内容

其他操作

操作文本

作用类似于innerText

具体操作如下：

（1）获取标签的文本

$(selector).text()

（2）设置标签的文本：

$(selector).text('文本')

获取或设置元素的高度和宽度

（1）宽度

$(selector).width()   //获取宽度

$(selector).width(value)    //设置宽度

（2）高度

$(selector).height()  //获取高度

$(selector).height(value)   //设置高度

操作值

（1）获取元素的value属性

$(selector).val()

（2）设置元素的value属性

$(selector).val(值)

操作元素的固有属性

（1）获取元素的固有属性

$(selector).prop('属性名')

（2）设置元素的固有属性

$(selector).prop('属性名','属性值')

例如：

<p id="xh" abc="xhh">星河梦</p>
console.log("固有属性"+$('p').prop('id'))
console.log('prop读自定义属性'+$('p').prop('abc'))
console.log('attr读自定义属性'+$('p').attr('abc'))
console.log('attr读固有属性'+$('p').attr('id'))

注意：prop 只能读固有属性，attr可以读固有属性也可以读自定义属性

查找和筛选元素

(1)eq(index)：获取索引为index的元素

(2)filter(expr)：筛选出与指定表达式expr相同的元素

(3)not(expr):筛选出与指定表达式expr不相同的元素

(4)find(expr)：查找与指定表达式相同的子元素

(5)next([expr]):返回与指定表达式相同的同辈元素

(6)parent([expr])：返回与表达式相匹配的的唯一的父元素

(7)sibings([expr])：返回与表达式匹配的所有同辈元素

<div class="d1">西安</div>
<div class="d1">杭州</div>
<div>北京</div>
<div>上海</div>
<div class="d1">广州
    <p>AAA</p>
    <p>BBB</p>
</div>

var t=$('div').eq(3).html()  //获取索引值为3的div，并且获取它的文本
console.log(t)

var srr=$('div').filter('.d1')   //筛选出class=d1的元素
console.log(srr)

var arr1=$('div').not('.d1')   //筛选出于于class=d1不同的元素
console.log(arr1)

var arr2=$('div').find('p')    //查找子元素
console.log(arr2)

var t=$('p').parent('.d1')
            console.log(t)

var s=$('p').siblings()   //查找所有匹配的同辈元素
console.log(s)