继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery基础——样式篇 (属性与样式)

Youwillbethere
关注TA
已关注
手记 6
粉丝 4
获赞 42

.attr() 与 .removeAttr()

//找到第一个input,通过attr设置属性value的值
        $('input:first').attr('value','.attr( attributeName, value )')
//找到第二个input,通过attr获取属性value的值
        $("input:eq(1)").attr('value')
//找到第三个input,通过使用一个函数来设置属性
        //可以根据该元素上的其它属性值返回最终所需的属性值
        //例如,我们可以把新的值与现有的值联系在一起:
        $("input:eq(2)").attr('value',function(i, val){
            return '通过function设置' + val
        })
//找到第四个input,通过使用removeAttr删除属性
        $("input:eq(3)").removeAttr('value')

.html() 与 .text()

//通过.text()方法替换文本内容
        $(".left a:first").text('替换第一个a元素的内容')
 //通过.html()方法替换html结构
        $(".left div:first").html('整个div的子节点都被替换了')

.val()

//单个select,返回第一个
        $("p").text( $("#single").val() )

注意:

.html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。

增加样式.addClass()
删除样式.removeClass()
切换样式.toggleClass()

样式操作.css()

总结:
1、通过.css方法设置的样式属性优先级要高于.addClass方法
2、 .addClass与.css方法各有利弊,一般是静态的结构,都确定了布局的规则,可以用addClass的方法,增加统一的类规则
如果是动态的HTML结构,在不确定规则,或者经常变化的情况下,一般多考虑.css()方式

元素的数据存储
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,取数据
.removeData( [name ] ) //删除接口

$('.right').click(function() {
        var ele = $(this);
        //通过.data方式设置数据
        ele.data("a", "data test")
        ele.data("b", {
            name: "慕课网"
        })
        //通过.data方式取出数据
        var reset = ele.data("a") + "</br>" + ele.data("b").name
        ele.find('span').append(reset)
    })
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP