jq:一个div多个背景色/点击获取div中的内容,获取div的属性值/获取当前页面url/获取子元素的属性值

1，一个div多个背景色

background: url(图片) no-repeat 95% 50%, -webkit-linear-gradient(#fff, #eee 50%,#ddd);

2,jq点击获取div中的内容------index-------属性值

1.获取ID属性值：event.currentTarget.id

2.获取自定义data-属性值：event.currentTarget.dataset.name----- （data-name）

3.获取div里的内容2种方法： html() text()

4.获取当前操作下标2种方法：$(this).index() $('.div1').index(this)

5.获取自定义属性包括已有属性的属性值：.attr("属性名")

例子如下：

html代码：

<body>
   <div class="div1" id='1' data-index='0' haha='333333'>张三</div>
   <div class="div1" id='2' data-index='1' haha='444444'>李四</div>
   <div class="div1" id='3' data-index='2' haha='444444'>王五</div>
</body>

js代码：

$('.div1').click(function(event) {
           var event=event||e;
           console.log(event.currentTarget.id); //获取id属性值
           console.log(event.currentTarget.dataset.name); //获取自定义data-属性值

           //获取div里的值 2种方法
           console.log($(this).html());
           console.log($(this).text());
           //获取自定义属性的属性值
           console.log($(this).attr("haha"));

           //获取当前操作下标
           console.log($(this).index());
           console.log($('.div1').index(this));
       });

3.jq获取div的属性值

<div class="item lottery-unit lottery-unit-5" data-id="{$draw.good5.id}">
    <div class="img">
        <img src="{$draw.good6.litpic}" alt="">
    </div>
    <span class="name">{$draw.good6.title}</span>
</div>

var id=$('.lottery-unit.lottery-unit-' + snum).attr('data-id');
console.log(ee);

4.jq获取当前页面url

设置或获取对象指定的文件名或路径。
window.location.pathname
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.pathname); 则输出：/topic/index

设置或获取整个 URL 为字符串。
window.location.href
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.href); 则输出：http://localhost:8086/topic/index?topicId=361

设置或获取与 URL 关联的端口号码。
window.location.port
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.port); 则输出：8086

设置或获取 URL 的协议部分。
window.location.protocol
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.protocol); 则输出：http:

设置或获取 href 属性中在井号“#”后面的分段。
window.location.hash

设置或获取 location 或 URL 的 hostname 和 port 号码。
window.location.host
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.host); 则输出：http:localhost:8086

设置或获取 href 属性中跟在问号后面的部分。
window.location.search
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.search); 则输出：?topicId=361

window.location
属性                  描述
hash                设置或获取 href 属性中在井号“#”后面的分段。
host                 设置或获取 location 或 URL 的 hostname 和 port 号码。
hostname      设置或获取 location 或 URL 的主机名称部分。
href                  设置或获取整个 URL 为字符串。
pathname      设置或获取对象指定的文件名或路径。
port                  设置或获取与 URL 关联的端口号码。
protocol          设置或获取 URL 的协议部分。
search            设置或获取 href 属性中跟在问号后面的部分。

5.获取子元素的属性值

<ul class=" list-paddingleft-2">
    <li>
        <p style="line-height: 16px;">
            <img style="margin-right: 2px; vertical-align: middle;" src="http://xxx.gif">
            <a title="xxx.doc" style="xxx" href="http://xxx.doc">
                <span style="xxx">xxx.doc</span>
            </a>
            </p>
    </li>
</ul>

<script>
    $(".list-paddingleft-2").on("click","li",function(){      
        //只需要找到你点击的是哪个ul里面的就行
        console.log($(this))
        console.log($(this).children('p').children('a').attr('title'))
    });
</script>

wjp@001

发布了173 篇原创文章 · 获赞 29 · 访问量 29万+

私信关注

jq:一个div多个背景色/点击获取div中的内容,获取div的属性值/获取当前页面url/获取子元素的属性值

猜你喜欢