|
目录
一、操作属性
1、attr():方法
2、prop():方法
二、css 属性
1.设置css属性
2.获取css属性
3.添加、删除、交替添加删除样式
三、设置/获取元素的width和height属性
?1、获取width
?2、设置width
四、设置获取元素内容
1、获取/设置元素内容体HTML代码
2、?获取/设置元素内容体纯文本
一、操作属性
1、attr():方法
可以操作标准属性,也可以操作自定义属性 只写属性名的属性,返回的不是true/false
- 单个属性:jQuery对象.attr('属性名','属性值')
- 多个属性:jQuery对象.attr({属性名:属性值}) ? 注意 参数是对象
- 获取属性:jQuery对象.attr('属性名'),没有返回undefined
- 移除属性:jQuery对象.removeAttr('属性名'),不传就什么都不做
?
2、prop():方法
只能操作标准属性, 只写属性名的属性,返回的是true/false
- prop()方法:操作checked , selected , disable 这类boolean值类型的属性,不可以操作自定义属性
- 设置单个属性:jQuery对象.prop('属性名','属性值')
- 设置多个属性:jQuery对象.prop({属性名 : 属性值})
- 获取属性:jQuery对象.prop('属性名') ,返回true /false
?
<a href="https://www.baidu.com">百度</a>
<input type="checkbox" name="" id="" checked>男
<div index='1'>attr </div>
<span>1234</span>
//jQuery 部分
<script>
$(function(){
console.log($('a').prop('href')); //获取元素固有属性值
$('a').prop("title","百度一下")
$('input').change(function(){
console.log($(this).prop('checked'));
})
//元素自定义属性 attr（）获取
console.log($('div').attr("index"));
$("div").attr("index",4);
//数据缓存 存放在元素内存中
$("span").data('unmae','pink')
})
</script>
二、css 属性
1.设置css属性
- 设置单个css属性：$(选择器).css("属性名","属性值")
- 设置多个css属性：$(选择器).css({属性名:"属性值",属性名:"属性值"…}) ? ? ? ?这里属性名的引号可加可不加
2.获取css属性
3.添加、删除、交替添加删除样式
- $(选择器).addClass("样式名")
- $(选择器).removeClass("样式名")
- ?? $(选择器).toggleClass(class属性)
<div></div>
$(function(){
//1、添加类 addClass
$('div').click(function(){
$(this).addClass('current')
})
//2、删除类removeClass
$('div').click(function(){
$(this).removeClass('current')
})
//3、切换类toggleClass
$('div').click(function(){
$(this).toggleClass('current')
})
})
三、设置/获取元素的width和height属性
?1、获取width
?2、设置width
| width属性 | 说明 |
|---|
| innerWidth() | innerWidth()方法用于获得包括内边界（padding）的元素宽度， | | outerWidth() | outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度， | | outerWidth(true) | 如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。 |
同理，innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说：对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);
$(function(){
//1、获取元素width height
console.log($('div').width());
//2、包含padding
console.log($('div').innerWidth());
//3、包含边框
console.log($('div').outerWidth());
//4、包含margin
console.log($('div').outerWidth(true));
})
四、设置获取元素内容
1、获取/设置元素内容体HTML代码
| 属性名 | 属性说明 |
|---|
| jQuery对象.html() | 获得内容体html代码，如果有标签代码，一并获得。 | | jQuery对象.html("HTML代码") | 设置html代码，如果有标签，将进行解析。 |
2、?获取/设置元素内容体纯文本
| 属性名 | 属性说明 |
|---|
| JQ对象.text() | 获得文本，如果有标签，忽略。 | | JQ对象.text("纯文本") | 设置文本，如果含有HTML标签，不进行解析。原样输出。 |
? ? ?text()只显示元素内的所有文本，不显示标签符号；而html()则是显示该元素内所有的html元素；?
$(function() {
//1、获取设置元素内容
$('div').html('我是div')
//2、获取设置元素文本内容text 只得到文字，不得到标签
$('div').text('zxcvbnm')
//3、获取设置表单val
console.log($('input').val());
$('input').val('请输入')
})
?
|