美文网首页
jQuery选择器 jQuery样式操作 属性操作

jQuery选择器 jQuery样式操作 属性操作

作者: 我的好昵称 | 来源:发表于2019-01-14 20:04 被阅读0次

    jquery用法思想一
    选择某个网页元素,然后对它进行某种操作

    jquery选择器
    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    (document)//选择整个文档的对象("li")//选择所有的li元素
    ("#myld")//选择id为myld的网页元素("myclass")//选择class为myclass的元素
    ("input[name=first]")//选择name 属性等于first的input元素("# uli li span")//选择id为uli元素下的所有li 下的span元素>

    对选择集进行修饰过滤(类似CSS伪类

    ("div").has("p");//包含p元素的div元素("div ").not("myclass");//选择class不等于class的地v元素
    ("div ").filter("myclass");//选择class等于class的div的元素("div")first();//选择 第一个div元素
    $("div").eq(5);//选择第六个div 元素>

    选择集转移

    ("div").prev("p");//选择div元素前面的第一个p元素("div").prevall('p');//选择div元素前面所有的p元素
    ("div").next('p');//选择div元素后面的第一个p元素("div").nextall("p");//选择div元素后面所有的p元素
    ('div').closest("form");//选择离div 最近的那个form父元素("div").parent();//选择div的父元素
    ("div").children();//选择div的所有子元素("div").siblings();//选择div的同级元素
    $("div").find("myclass");//选择div内的class等于myclass等于myclss的元素>

    jquery样式操作
    jquery用法思想二
    同一个函数完成取值和赋值

    操作行间样式

    //获取div样式
    ("div").css("width")("div").css("color");

    //设置div的样式
    ("div").css("width","30px");("div").css("width","30px");
    $("div").css({fontsize:"30px",color:"red"});

    特别注意
    选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。

    操作样式类名

    ("#div").addclass("divClass2")//为id为div的 对象追加样式divclass2("#div").removeClass("divClass")//移除id为div的对象class名为divclass的样式
    (#"div1").removeclass("divclass divclass2")//移除多个样式(#"div1").toggleclass("anotherclass")//重复切换anotherclass>

    jquery属性操作
    1、html() 取出或设置html内容

    //取出html内容
    var htm =(#"div1").html();
    //设置html内容
    $("#div1").html("<span"添加文字</span");
    2、text() 取出或设置text内容

    // 取出文本内容

    var htm =('#div1').text();

    // 设置文本内容

    $('#div1').text('<span>添加文字</span>');
    3、attr() 取出或设置某个属性的值

    // 取出图片的地址

    var src =('#img1').attr('src');

    // 设置图片的地址和alt属性

    $('#img1').attr({ src: "test.jpg", alt: "Test Image" });

    相关文章

      网友评论

          本文标题:jQuery选择器 jQuery样式操作 属性操作

          本文链接:https://www.haomeiwen.com/subject/rqbjdqtx.html