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

最新推荐文章于 2022-09-02 17:33:06 发布

wjp@001

最新推荐文章于 2022-09-02 17:33:06 发布

阅读量1.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_29058883/article/details/104867017

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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>

移动端 ios 用div写的点击事件点击有延迟需添加 cursor: pointer;属性或者选择用button进行事件操作

7.H5页面获取屏幕宽高

document.documentElement.clientWidth;
document.documentElement.clientHeight;

8.页面加载时给的子元素的第一个元素加class

<div id="xiao">
    <ul>
        <li></li>

    </ul> 
</div>

js代码：

<script>

    $(function () {
        $('#xiao').children().eq(0).attr('id','tree');
//        console.log($('#d').children().eq(0).attr('id'));
        $("#tree").treeview({
            collapsed: true,
            animated: "medium",
            control: "#sidetreecontrol",
            persist: "location"
        });
    })


</script>

9. div 自适应高度自动填充剩余高度参考：https://www.cnblogs.com/pangguoming/p/5695184.html

<div class="outer">
    <div class="A">头部DIV</div>
    <div class="B">下部DIV</div>
</div>

body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }

10获取CheckBox是否选中

$(this).is(':checked')//获取CheckBox是否选中

11.ios页面上下滑动抖动

增加代码

*{
  -webkit-overflow-scrolling: touch;
}

12.vue 解决苹果手机输入框键盘回弹留下了空白遮罩的处理方式

input用@blur=iosBlur引入

 iosBlur() {
      let ua = window.navigator.userAgent;
      //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
      if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        //ios系统
        let currentPosition, timer;
        let speed = 1;
        timer = setInterval(function () {
          currentPosition =
            document.documentElement.scrollTop || document.body.scrollTop;
          currentPosition -= speed;
          window.scrollTo(0, currentPosition); //页面向上滚动
          currentPosition += speed;
          window.scrollTo(0, currentPosition); //页面向下滚动
          clearInterval(timer);
          // alert("失去焦点")
          console.log("失去焦点")
        }, 100);
      }
    }

13. js动态修改背景图片

        var img =res.data
        document.getElementById("slide1").style.backgroundImage="url("+img+")";

14.关于swiper5的左右切换按钮点击出现蓝色底边的问题

.swiper-button-next,.swiper-button-prev,.swiper-button-white{
	outline: none!important;
}

15.JQ直接使用拼接获取id？

<script type="text/javascript" src="JQ/jquery-2.1.0.js" ></script>//JQ包
<script>
	var i=11;<br>
	for (var i=1;i<5;i++) {<br>
		$(eval("a"+i)).html("aaaaaa");<br>
		//此处使用了eval方法就不需要再加#
	}
	</script>

16.jq给div设置属性

this.children().eq(0).children().eq(1).setAttribute('lay-sort',obj.type);

wjp@001

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq:一个div多个背景色/点击获取div中的内容,获取div的属性值/获取当前页面url/获取子元素的属性值

1，一个div多个背景色background: url(图片) no-repeat 95% 50%, -webkit-linear-gradient(#fff, #eee 50%,#ddd);
复制链接

扫一扫

专栏目录