Skip to content

jq-03 属性、位置

一、属性操作

  • .attr(); 传一个参数为获取,两个为设置;
  • removeAttr(); 删除属性;
  • .prop();传一个为获取,两个为设置;
  • removeProp();删除属性;

如果需要设置多少属性,可以添加一个对象;

attr和prop的区别

  1. prop添加的自定义属性在html页面上是没有的,比如index属性。
  2. 对于布尔类型的属性来说,应该使用prop;
  3. prop只能删除自定义的属性,不能删除自带的属性;
  4. 在jQuery1.6之后,对于checked、selected、disabled这类boolean类型的属性来说,应该使用prop方法。
js
$("input").attr("checked");     //checked
$("input").prop("checked");   //true

// 设置属性
$(':checked').prop('checked',true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false

全选案例:

js
$("label :checkbox").click(function(){
    $("div input").prop("checked",$(this).prop("checked"))  //点击全选,让div下的所有input选项都被选中,值和全选按钮一样;
})
$("div input").click(function(){
    if($("div input:checked").length == $("div input").length){
            //如果被选中的长度和所有input的长度相等,则让全选按钮被选中;
        $("label :checkbox").prop("checked",true);
    }else{
        $("label input").prop("checked",false)
    }
})

二、类名操作

  • addClass();添加类名,多个用空格隔开,不会去掉原有的;

  • removeClass();删除类名,填写指定删除类名;

  • toggleClass();有则删除,没有则添加,常用于点击事件;

  • hasClass("on"); 是否有on的类名的元素,有返回true,没有返回false,可以做为判断,判断没有就添加,判断没有就添加;

三、文本内容

  • html(); 获取文本内容,传内容为设置新内容;类似于innerHTML;

  • text(); 获取文本内容,传内容为设置新内容;类似于innerText;

  • val(); 获取input默认值;传内容设置新内容;

  • val([]);根据value值选中表单复选框或单选框;中括号填写value值来选中,

选中select时,可以直接在val框填写选中项,多选时,多个项填写到数组中;

四、css样式

.css()

  1. 获取:填写一个参数属性名;
  2. 设置:填写属性名和属性值;
  3. 设置多个样式时,可以放到一个对象当中,

可以简写:属性值可以不加单位px,对象里属性名可以不加引号,如果有中划线不加引号需要转变驼峰;

js
$('div').css({width: 50, height: 50})

五、位置

  • offset(); 返回一个对象,到html的位置,和定位属性没关系;

  • offset().top/left; 取对象里面的top值和left值;

  • position(); 返回一个对象,到父元素有定位属性的距离,

  • position().top/left; 取对象里面的top值和left值

  • $(window).scrollTop()/scrollLeft() 浏览器被卷起的top值和left值;

    • 括号里面也可以设置值,到指定位置;
    • $(document)也可以,最好是window,是标准写法;
  • $(window).scroll(function(){}); 浏览器被卷起执行函数;

六、尺寸

  • width()/height(); 获取元素的宽度和高度;获取出来的没有单位px;
  • innerWidth()/innerHeight(); 宽度/高度+padding
  • outerWidth()/outerHeight(); 宽度/高度+padding+border(真实宽高);括号里面加true,可以加上margin;
  • $(window).width()/height(); 浏览器可视宽高;
  • $(document).width()/height();文档的真实内容宽高;

七、节点

创建

创建:$("<li>3</li>"); 创建了一个内容为3的li标签;

添加节点

  • 从后添加
    • 父元素.append(新节点)
    • 新节点.appendTo(父元素)
  • 从前添加
    • 父元素.prepend(新节点)
    • 新节点.prependTo(父元素)
  • 指定标签之后
    • a.after(b)
    • b.insertAfter(a)
  • 指定标签之前
    • a.before(b);
    • b.insertBefore(a)
  • 替换
    • a.replaceWith(b); b替换a; 替换会将内容也直接清空;
    • b.replaceAll(a); b替换a;

谁在前链式调用就是给谁添加事件;

js
//  谁在前调用,就是给谁设置css样式;
$("ul").append("<li></li>").css(“border","1px solid red");
$("<li></li>").appendTo($("ul")).css("border","1px solid red");

包裹节点

  • a.wrap(b) 把调用的标签包起来;
  • a.wrapAll(b) 把所有的a标签拿出来包一个父元素;
  • a.wrapInner(b) 把a标签的内容用一个父元素包起来;
  • a.unwrap() 删除包裹的父元素;

克隆节点

  • .clone(); 可以传布尔值,不传为false;
    • false:只克隆元素,不克隆脚本;
    • true:脚本一起克隆;

删除节点

  • .empty() 删除元素内容,自身保留;
  • .html('') 清空内容,会造成内存泄漏,绑定的事件不会被清除;
  • .remove() 把整个元素删除,返回被删除的元素,会将脚本删除;(即使再添加回去也没有事件)
  • .detach() 返回被删除的元素,不会删除脚本;(添加回去还有事件)

十一、筛选(方法)

  • first() 所有元素中的第一个
  • last() 所有元素中的最后一个
  • eq() 下标从0开始
  • not() 除了传入的元素
  • has() 有小括号中的元素
  • slice() 和字符串slice用法一样
  • is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。
  • filter() 找到传入元素的元素,括号还可以是一个函数;filter(function(){return nodeType!=1}) 不是标签的节点
  • contents() 所有子节点和文本节点,一般配合filter使用

父元素相关

  • children() 直接子元素,可以传参,指定某个直接子元素

  • find() 所有子元素,传参为某个子元素

  • parent() 直接父元素

  • parents() 所有父元素可以传参,指定某个父元素

  • parentsUntil() 所有父元素直到传入的父元素,不包括传入的父元素

  • offsetParent() 找到离他最近的有定位的父元素

兄弟节点

  • next() 选择下一个相邻兄弟元素
  • nextAll() 选择下面所有的元素,小括号填写可以指定下面的某个元素(css样式选择器当中是("li~p")li下面所有的兄弟元素p)
  • nextUntil() 下面所有的兄弟元素直到小括号的元素,不包括小括号
  • prev() 上一个兄弟元素
  • prevAll() 上面所有的兄弟元素,小括号传参表示指定元素
  • prevUntil() 上面所有的兄弟元素直接小括号的元素,不包括小括号
  • siblings() 所有兄弟元素,可以传一个具体的标签,指定某些兄弟元素
js
// 使用contents作childNodes使用;
$("span:contains(改)").click(function(){
    var val = prompt("请输入一要添加的内容")
    $("div").contents().filter(function(){return this.nodeType!=1})[0].nodeValue = val;
    console.log(val);
})

十二、自定义动画

.animate(); 参数是:对象,时间,函数;

js
$('div').animate({'opacity': 1}, 200, function(){
    console.log('动画完成')
})

让浏览器的scroll滚动条慢慢回到0

$("html,body").animate({"scrollTop":0});

写html和body是兼容;相当于:document.documentElement || document.body

高频面试题

● $().attr 与 $().prop() 的区别 ?

Released under the MIT License.