jQuery基础 (三) - 属性样式篇 -

第1章 jQuery的属性

1.1 attr() 与 removeAttr()
获取属性 attr("属性名")
设置属性 attr("属性名","属性值")
attr() 与 css() 有些类似都要写俩个参数、但css()是添加新属性、
而attr()是可添加新属性、可修改旧属性、可自定义属性、也可以获取属性的值

修改类名'class': 'item'
修改图片路径"src","images/xiaoming.png"
修改链接地址'href': 'http://www.baidu.com'
attr()添加一组新属性写法

image.png

1.2 删除属性 removeAttr("属性名")
removeAttr()从被选元素移除一个或多个属性。

第2章 jQuery的样式

2.1、css()
css() - 为被选元素设置一个或多个样式属性

   用法(1)：属性值可以累加

    $('#btn').click(function () {
        $('div').css('width','+=10px')      //   每点击一次width增加10px
    })

---

   用法(2)：设置一组样式

    $('#btn').click(function () {
        $('div').css({
            width:"+=10px",
            height:"120px",
            backgroundColor:'blue' ,    // . 注意这里哟，驼峰命名法
            "font-size": 16px           // . 不用驼峰命名法、加 " " 也是可以的
        })
    })

---

css() - 设置或返回样式属性
返回 CSS 属性
语法：css("propertyname");
实例：$("p").css("background-color");

设置 CSS 属性
语法：css("propertyname","value");
实例：$("p").css("background-color","yellow");

设置多个 CSS 属性
语法：css({"propertyname":"value","propertyname":"value",...});
实例：$("p").css({"background-color":"yellow","font-size":"200%"});

---

2.2、addClass()、removeClass()、toggleClass()、hasClass()

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
hasClass() - 判断是否含有某样式，有返回true，没有返回false

追加样式：addClass()
移除所有样式：removeClass()
移除指定样式：removeClass("hover")
注意：小括号中只要书写类的名称。

    $Taoli.on('click', function() {
        $(this).addClass('active').siblings().removeClass('active');
    })

hasClass() - 用法

    
    
    
    
    


    
保健用品、二楼左转
    
    

第三章：HTML，文本内容 ，值

jQuery的属性与样式之html()、text()及val()

html()、text()和val()三种方法都是用来读取选定元素的内容：
.html()是用来读取元素的html内容（包括html标签），
.text()用来读取元素的纯文本内容，包括其后代元素，
.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。

3.1 html()
html()获取某元素的HTML内容，包括标签，包括文本内容 $('.item').html()
html("...")设置某元素的HTML $('.item').html('内容')

3.2 text()
text()获取某元素的文本内容$('.item').text()
text("...")设置某元素的文本内容$('.item').text('内容')

---

3.3 val()
val()获取表单元素的值$('input').val()
val("...")设置表单元素的值$('input').val('请输入用户名')

//  设置

1、以下两种方式都能获得input输入值。

//  获取
电话：
function(){
    var mobi = $("#phone").val();
    var mobi = $('input[name="mobile"]').val();
}

---

jQuery - 获得内容和属性
获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
实例:

("#btn1").click(function(){ alert("Text: " +("#test").text());
});
("#btn2").click(function(){ alert("HTML: " +("#test").html());
});
("#btn1").click(function(){ alert("Value: " +("#test").val());
});

jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
实例：

("#btn1").click(function(){("#test1").text("Hello world!");
});
("#btn2").click(function(){("#test2").html("Hello world!");
});
("#btn3").click(function(){("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

实例：

("#btn1").click(function(){("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
("#btn2").click(function(){("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello world!
(index: " + i + ")";
});
});
设置属性 - attr()
实例:(改变（设置）链接中 href 属性的值)

("button").click(function(){("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr() 方法也允许您同时设置多个属性

实例：（同时设置 href 和 title 属性）

("button").click(function(){("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

实例：（带有回调函数的 attr() 方法）

("button").click(function(){("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});

---

第4章 jQuery的对象访问

1、 size() 匹配元素数量 = length

jqeury对象也有length属性，表示jquery对象有多少元素。size()等价于length

语法：$().size();
小例子：var a = $("tr").size();

---

2、 index() 写选项卡
index() - 指定元素对应其他的指定元素
$(this).index()对应思想。点击box1中的p对应的box2中的p变色。

2331518014474_.pic.jpg

$('.box1 p').click(function () {
    // 点击box1中的p,对应的box2中的p变色
    $('.box2 p').eq($(this).index()).css('background-color','red');   //  序号 0.1.2.3.4
});
//  这里  $(this).index()  是 box1 选中 p 的序号位置、但是box1和box2 序号排列是相同的，所以可以共用

3、 each()
each() - 为每个匹配到的元素，规定要运行的代码

$('div').each(function () {
   // ...运行的代码
})

表格的隔列变色小实例：

屏幕快照 2018-02-09 下午8.38.55.png

$('tr').each(function () {
    $(this).children('td:odd').css('background-color','gray')
})

---

给标签添加类名小实例：

WechatIMG86.jpeg

    
    
    
    




    凉凉三生三世
    恍然如梦须臾的年风干泪痕
    若是回忆不能再相认
    就让情分落九尘