JQuery干货篇之管理成分

时间:2020-03-17 01:35来源:亚洲城ca88唯一官方网站
2.index() 复制代码 代码如下: attr attr() 方法设置或再次回到被选成分的属性值。 语法: $(selector).attr(attribute) 再次回到被选成分的属性值。 $(selector).attr(attribute,value) 设置被选成分的性能

2.index()

复制代码 代码如下:

attr

attr() 方法设置或再次回到被选成分的属性值。

语法:

  • $(selector).attr(attribute) 再次回到被选成分的属性值。
  • $(selector).attr(attribute,value) 设置被选成分的性能和值
  • $(selector).attr(attribute,function(index,oldvalue)) 设置被选元素的属性和值。
参数 描述
attribute 规定属性的名称。
function(index,oldvalue) 规定返回属性值的数。该函数可接收并使用选择器的 index 值和当前属性值。

实例:

    $("img").filter(":first").attr('src');   //得到属性

$("img").each(function (index,elem) {    
        if(index%2==0)
            $(elem).attr("src",'lily.png');      //设置属性
        console.log($(elem).attr("src"));
        })


        $("img").attr('src',function (index,oldValue) {  //这里的oldValue表示原来属性的值,index是索引
        if(oldValue=="rose.png")
            return 'lily.png';
        else
            return 'astor.png';
    })


    attrs={       //使用映射对象一次设置多个值
        src:'lily.png',
        style: 'border: thick double red'
    };
    $("img:eq(1)").attr(attrs);

function(index,class)

复制代码 代码如下:

text

text() 方法方式设置或回到被选成分的文本内容。当该情势用于重回三个值时,它会再次回到全部相配成分的三结合的文书内容(会删除 HTML 标记)

语法:

  • $(selector).text() 当该办法用于再次来到四个值时,它会回去全部相配成分的结合的公文内容(会删除 HTML 标记)。
  • $(selector).text(content) 当该办法用于安装值时,它会覆盖被选成分的兼具剧情。
  • $(selector).text(function(index,oldcontent)) index表示索引,oldcontent表示选用器当前的公文内容
$(selector).toggleClass(function(){ },switch)

剧本之家

html

html() 方法重回或安装被选成分的内容 (inner HTML)。若是该方式未安装参数,则赶回被选成分的当下内容。

语法:

  • $(selector).html() 当使用该措施重回二个值时,它会回到第一个相配成分的剧情。

  • $(selector).html(content) 当使用该方式设置三个值时,它会覆盖全数相配成分的剧情。

  • $(selector).html(function(index,oldcontent)) 使用函数来设置有着相称成分的剧情。index - 可选。接受接受器的index 位置,oldcontent - 可选。接收选取器的近来内容

class

累积越多内容

自己博客小说

实例:

实例代码:

addClass

addClass() 方法向被选成分增添二个或多少个类

语法:

  • $(selector).addClass(class) 这里的class是类名倘使要求增添多少个类,中间用空格隔开

  • $(selector).addClass(function(index,oldclass)) 这里的index是索引,oldClass是本来就有个别类名,都以可选参数。那么些函数的回到的正是要拉长的类名

实例:

$("img:even").addClass("redBar");  //向偶数的img添加类redBar

$("img").addClass(function (index,currentClass) {    //这里的currentClass就是原来有的类名,可选
        if(index==1)
            return 'blueBar';   //第二个img应用blueBar这个类
        else
            return 'redBar';      //这里需要注意的是,对同一个img应用类的时候,因为这个类的定义有优先级,上面定义会被后面定义的覆盖,所以要注意类定义的位置
    })


    $("img").filter(":odd").addClass("redBar").end().filter(":even").addClass("blueBar");  //链式调用

    $("img").addClass("blueBar redBar");   //添加两个类
$(selector).toggleClass(class,switch)

加多更加多内容

val

val() 方法重回或安装被选元素的值,元素的值是因此 value 属性设置的。该方法非常多用于 input 成分,假若该办法未安装参数,则赶回被选成分的当下值

语法:

  • $(selector).val(value) 设置文本域的值为value
  • $(selector).val() 得到文本域的值
  • $(selector).val(function(index,oldvalue)) 设置文本域的值,这里函数的重临值将会用来安装文本域的值,index意味着成分索引,oldvalue表示选取器当前文本域的值

描述

语法布局二:复制代码 代码如下:$.toggleClass,switch卡塔尔国

JQuery干货篇之管理成分

留心这里用的依旧自己前两篇用的事例,实际情况请看本人的博客

语法:$(selector).index()

此方法对充裕或移除相称成分的二个或多少个类实行切换。toggleClass(卡塔尔(قطر‎方法检查匹配成分中钦点的类。假若不设有则加多类,要是已安装则删除之。那正是所谓的切换效果。

css

css() 方法再次来到或安装匹配的要素的二个或七个样式属性,这里只说css,还或然有别的的装置css体制请看w3School

语法:

  • $(selector).css(name) 再次来到第贰个相配成分的 CSS属性值。namecss质量的称谓

  • $(selector).css(name,value) 设置有着相配成分的钦赐 CSS 属性。name代表属性名称,value代表属性的值

  • $(selector).css(name,function(index,value)) 此函数再次回到要设置的属性值。采纳多个参数,index为成分在对象集结中的索引地点,value 是原本的属性值。name意味着要设置的属性名称,再次回到值正是要设置的属性值

实例:

$("label").css('font-size','30px');  //设置字体大小

$("label").css('font-size',' =10');  //使用相对值设置属性值,在原有的基础上加上10

console.log($("h1").css('font-family'));   //获取h1标签的字体

var cssValues={
    'border':'thick double red',
    'font-size':'1.5em'
};
$("label").css(cssValues);   //同时设置多个属性

参数

参数列表: 参数 描述 class 规定加多或删除的类。 要是要求丰裕八个类,使用空格间距。 switch 可选。布尔值,为true则拉长对应的class,不然就删除。

hasClass

hasClass() 方法检查被选成分是还是不是包含钦赐的class

语法:

  • $(selector).hasClass(class) //重临值是false和true

实例:

console.log($("img:odd").hasClass("redBar"));     

2.1 第二个相称成分的 index,相对于同胞成分

剧本之家

removeAttr

removeAttr() 方法从被选成分中移除属性。

语法:

  • $(selector).removeAttr(attribute) 这里的attribute是性质的名字

实例:

$("img:first").removeAttr("src");  //删除属性src

获取成分绝对于接受器的 index 地点。

实例代码:

toggleClass

toggleClass(State of Qatar对设置或移除被选成分的叁个或七个类实行切换。该办法检查各种成分中钦点的类。虽然不设有则增多类,就算已安装则删除之。那就是所谓的切换效果

语法:

  • $(selector).toggleClass(class,switch) class必备的,用来规定增添或移除class的钦定成分,如需规定若干 class,请使用空格来分隔类名。switchboolean可选参数,规定是或不是丰裕或移除class

  • $(selector).toggleClass(function(index,class),switch) index表示索引,class表示选拔器当前怀有的类

实例:

$("img").toggleClass("redBar");   //这里对所有的img在redBar这个类之间切换

$("img").toggleClass("redBar blueBar");  //在两个类之间来回的切换



$("<button>ToggleClass</button>").appendTo("#buttonDiv").click(function (e) {
        $("img").toggleClass('redBar blueBar');   //在两种class之间切换,如果有就删除,没有的就添加
        e.preventDefault();    
        })


        //下面添加一个按钮,完成同时添加多个图片的效果
    $("<button>ToggleClass</button>").appendTo("#buttonDiv").click(function (e) {
        $("img").toggleClass(function (index,currentClass) {
            if(index%2==0)
                return 'blueBar';   //动态的切换,这里是偶数就切换blue
            else
                return 'redBar blueBar';  //这里是奇数的图片在两种颜色来回的切换

        });
        e.preventDefault();

    })

需求。规定增多或移除 class 的钦点成分。

语法布局一:复制代码 代码如下:$.toggleClass

$(selector).index(element)

htmlheadscript type="text/javascript" src="/jquery/jquery.js"/scriptscript type="text/javascript"$(document).ready(function(){ $("button").click(function(){ alert($(".hot").index($("#favorite"))); });});/script/headbodyp请点击下面的按钮,以获得 的元素相对于 jQuery 选择器 () 的 index:/pbutton获得 index/buttonulliMilk/lili Tea/lili Coffee/li/ul/body/html

把函数的重临值作为切换的类。

2.2 成分的 index,相对于接受器

指望本文所述对我们的jQuery程序设计具备利于。

措施重返钦点成分相对于别的内定成分的 index 地点。注释:假如未找到成分,index(卡塔尔国 将再次回到 -1。

参数列表: 参数 描述 function 函数定义再次回到必要丰富或删除的一个或四个类名。 index - 可选,选择接纳器的目录地方。 class - 可选,选取选择器的脚下的类。 switch 可选。布尔值,为true则拉长对应的class,不然就删除。

如需规定若干 class,请使用空格来分隔类名。

本文实例叙述了jQuery中toggleClass(卡塔尔国方法用法。分享给我们供我们参考。具体深入分析如下:

语法

语法:

描述

要求。规定再次回到供给丰盛或删除的贰个或七个类名的函数。

index - 可选。经受采用器的 index 地方。class - 可选。选择接纳器的眼下的类。switch可选。布尔值。规定是或不是充分(true卡塔尔或移除(falseState of Qatar类。

对安装货已出被选成分的叁个或几个类举办切换。该措施行检查查各样成分中内定的类,借使不真实则增多类,即使已设置则将之删除。那就是所谓的切换效果,但是经过“switch”参数,只好够鲜明只删除大概增多类。

获得第二个相配成分相对于其亲生元素的 index 地方。

应用函数来切换类

!DOCTYPE htmlhtmlheadtitletest/titlemeta charset="utf-8"script type="text/javascript" src= "jquery-1.8.3.js"/scriptstyle type="text/css".list_1,.list_3 {color: red;}.list_0,.list_2 {color: blue;}/style/headbodyh1this is a heading!/h1ulliAAA/liliBBB/liliCCC/liliDDD/li/ulbutton添加或移除列表项的类/button/bodyscript type="text/javascript"$("button").click(function() {$("li").toggleClass(function() {return "list_"   $(this).index();});});/script/html

可选。布尔值。规定是不是丰富或移除 class。

switch

参数

时间: 2019-12-30阅读: 50标签: jquery1. toggleClass()

编辑:亚洲城ca88唯一官方网站 本文来源:JQuery干货篇之管理成分

关键词: 亚洲城ca88

  • 上一篇:没有了
  • 下一篇:没有了