5. JQuery的属性

5.1 attr的使用

attr(name|properties|key, value|function)

概述:设置或返回被选元素的属性值.

参数: name: 属性名称 properties:作为属性的"名/值对" 对象

​ key,value :属性名称,属性值

​ key,function(index,attr) :1.属性名称 2. 返回属性值的函数

​ index为:当前元素索引,attr为原值

console.log($('div:first').attr('title'));
//输出第一个div的title属性

给所有的div设置那么属性

$('div').attr('name','我是憨批');

移除所有div的title属性

$('div').removeAttr('title');

给所有的div设置class=“box3”

$('div').attr('class','box3');

移除所有div为box的class

$('div').removeClass('box');

给所有的div添加class=‘abc’

$('div').addClass('abc');

得到最后一个li的标签文本

$('li:last').html()

设置第一个li的标签体为

sdadasd

$('li:first').html("<h1>sdadasd</h1>");')

得到输入框的中的value值

console.log($(':text').val())

设置输入框的值为abcdefg

$(':text').val('abcdefg');

点击’全选’按钮实现全选,或取消全选

var check=$(':checkbox');
var is=false;
 $('button:first').click(function () {
 	is=!is;
 	 check.attr('checked',is);
 });

此时出现一个问题,点击完checkbot取消选择后,再次全选无法使用

此时使用另一个方法prop();

prop的用法差不多,但是是专门操作布尔值的属性,而attr是为了其他值

var check=$(':checkbox');
 $("button:first").click(function () { 
 	 check.prop("checked",true); 
 });
  $("button:last").click(function () {  
 	 check.prop("checked",false);
 });

5.2 css()的使用

单个使用

$(‘p’).css(“color”,“res”);

多个css使用

$("p").css({
color:red,
width:30
})

5.3 位置

offset():相对页面左上角的坐标

var offset=$('.div').offset();
console.log(offset.left,offset.top); //获得
//修改
$('.div').offset({left:20,
                 top:100});

position():相对于父元素左上角的坐标

var position=$('.div').position();
console.log(position.left,positions.top);

scrollTop() :读取/设置滚动条的Y坐标

console.log($("div").scrollTop());//区域内
console.log($("html").scrollTop());//整个网页
//设置滚动
console.log($("div").scrollTop(200));
console.log($("html,body").scrollTop(100));

5.4 尺寸

width()和height() :获得尺寸大小

var div=$('div');
console.log(div.width(),div.height());

innerWidth()和innerHeight();内部尺寸

console.log(div.innerWidth(),div.innerHeight());

outetWidth()和outetHeight():外部尺寸

console.log(div.outetWidth(),div.outetHeight());

5.5 过滤filter()

ul下拉标签中title属性为hello的

var lis=$('ul>li');
lis.filter('[title=hello]').css(...)

ul下拉标签中title属性不为hello的

var lis=$('ul>li');
lis.not('[title=hello]').css(...);

li中有span标签的

var lis=$('ul>li');
lis.has('span').css(...);