web前端 (14)Jquery 02

目录
Jquery对象的 样式函数 ***

Jquery对象的 样式函数 ***

格式:
$obj.css(JSON对象);

案例:
$(“div”).css({
“font-size”:“50px”,
“color”:“red”
});

筛选选择器 熟悉
基本筛选选择器 熟悉

格式:
$(选择器1:first) : 选择选择器1中的第一个元素
$(选择器1:last) : 选择选择器1中的最后一个元素
$(选择器1:eq(下标)) : 选择选择器1中的指定下标的元素
$(选择器1:gt(下标)) : 选择选择器1中的大于指定下标的元素
$(选择器1:lt(下标)) : 选择选择器1中的小于指定下标的元素
$(选择器1:even) : 选择选择器1中的偶数下标的元素
$(选择器1:odd) : 选择选择器1中的奇数下标的元素
$(选择器1:not(选择器2)) : 从选择器1中 排除符合选择器2 条件的元素 !

案例:
$(function(){
$(“p:first”).css({“font-size”:“20px”});
$(“p:last”).css({“font-size”:“20px”});
$(“p:eq(4)”).css({“color”:"#3a3"});
$(“p:gt(4)”).css({“color”:"#a33"});
$(“p:lt(4)”).css({“color”:"#33a"});
$(“p:even”).css({“border”:“5px solid #333”});
$(“p:odd”).css({“border”:“5px solid #ccc”});
$(“p:not(.x)”).fadeOut(5000);

});

内容筛选选择器 了解

• 筛选内容是否包含
  格式: $(“选择器:contains(‘包含的文本’)”);
  从选择器所选择的元素中, 筛选出包含指定文本的元素 !

• 筛选内容为空
  格式: $(“选择器:empty”);
  从选择器所选择的元素中, 筛选出不存在文本内容的元素 !

案例:
$(function(){
$(“p:contains(‘孙宽’)”).hide(3000);
$(“p:empty”).css({“border”:“20px solid #000”});
});

可见性筛选选择器 了解

格式:
$(“选择器:visible”); 从选择器中筛选出可见的元素
$(“选择器:hidden”); 从选择器中筛选出不可见的元素
不可见的元素:
- 宽度/高度为0
- display:none
- input的type属性为hidden

案例:

短小精干小泽马修改

确认

表单筛选选择器 了解

筛选的是 input 标签的 type属性值

格式:
$(“选择器1:type属性值”);
//从选择器1的结果中, 筛选匹配type属性的input

案例:

<script type="text/javascript">
    $(function(){
        $(":password").css({"border":"2px solid #3a3"});
        $(":text").css({"border":"2px solid #a33"});
    });
</script>
    <input type="password">
    <input type="text">

属性筛选选择器 了解

• 筛选属性存在
  格式:
  $(“选择器1[属性名]”);
  案例:
  将所有带有title属性的img标签, 样式修改为宽度 200px;
  $(“img[title]”).css({“width”:“200px”});
• 筛选属性匹配某值
  格式:
  $(“选择器1[属性名=‘值’]”);
  案例:
  将所有带有title属性的img标签,且title值为hahah, 样式修改为宽度 200px;
  $(“img[title=‘hahaha’]”).css({“width”:“200px”});
• 筛选属性不匹配某值
  格式:
  $(“选择器1[属性名!=‘值’]”);
  案例:
  将所有带有title属性的img标签,且title值不为hahah, 样式修改为宽度 200px;
  $(“img[title!=‘hahah’]”).css({“width”:“200px”});

Jquery对象常用函数
样式函数 CSS ***

格式1.
一次指定单个样式
$obj.css(“样式键”,“样式值”);

格式2.
一次指定一组样式:
$obj.css(JSON对象);

修改与获取 元素的属性值

回顾:
在JS中, 通过dom对象 修改元素的属性值的方式为:
对象.属性名 = 值;

在Jquery中, 通过attr函数 设置与获取属性值:
格式1.
设置属性值: $obj.attr(“属性名”,“属性值”);
获取属性值: var 属性值 = $obj.attr(“属性名”);

格式2.
    设置一组属性值:  $obj.attr(JSON对象);

案例:
修改网页中 所有的img标签的src属性值为: images/xxx.jpg

$("img").attr("src","images/xxx.jpg");

注意: 在Jquery中, 通过attr函数 无法正确的操作:
class属性 / value属性 / 文本内容

获取与设置 class属性值

• 添加class
  $obj.addClass(“值”);
• 删除class
  $obj.removeClass(“值”);
• 替换class
  $obj.toggleClass(“值”); //如果值存在, 则删除 ! 不存在则添加

案例:

...

输入框的value属性值获取 了解

通过attr函数 可以获取value属性值, 但是得到的永远都是初始值 !

Jquery提供了一个用于获取与设置value属性值的函数

获取: var value = $obj.val();
设置: $obj.val(值);

设置与获取文本内容 *

在JS中, 通过dom对象的innerHTML属性 来获取与修改 元素的文本内容 !

在Jquery 中 , 获取内容:

格式1.    
    var text = $obj.html();//获取元素文档内容
格式2.
    var text = $obj.text();//获取元素文本内容

html() 与 text() 的区别: 
    text函数 获取内容时,会忽略标签部分 
    html函数 获取内容时, 会携带标签部分

    例如: 获取如下div的内容时 : 
        <div><span>一二三四五</span>上山打老虎</div>

        html()结果:   <span>一二三四五</span>上山打老虎
        text()结果:   一二三四五上山打老虎

在Jquery中 指定文本内容:
格式:
$obj.html(内容);