此时情绪此时天，无事小神仙
好好生活，平平淡淡每一天

编辑

Js知识点

获取某元素里面的元素个数

<body>
    <ul id="for_ulli">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script type="text/javaScript">
//li的总个数
var liSize;
//计算li的总个数
$(document).ready(function(){
    var temp = document.getElementById('for_ulli');
    var lis = temp.getElementsByTagName('li');
    liSize = lis.length;
})
</script>

获取指定 CSS 选择器的一个元素

<script>
    //通过类选择器获取节点
    doucument.querySelector('.first');
    //通过id选择器获取节点
    doucument.querySelector('#second');
    //通过伪类选择器获取节点
    document.querySelector('.first>span');
    //确认selectAll批量获取节点
    document.querySelectorAll('#second>div');
</script>

获取元素属性

<body>
    <div id="nice">
        <input name="good" value="1">
        <input name="good" value="2">
        <input name="good" value="3">
    </div>
</body>
<script type="text/javascript">
$(document).ready(function(){
    $("#nice input[name='good']").each(function(index,dom){
         var str = dom.value;
        console.log("第一种方式:"+str);
    });
    var doms = new Array();
    doms = $("#nice input[name='good']");
    for (var i = 0; i < doms.length; i++) {
        var str = doms[i].value;
        console.log("第二种方式:"+str);
    }
    //获取父级元素
    var domdiv = document.getElementById("nice");
    //根据父级元素获取所有子
    var sons = domdiv.querySelectorAll("input[name='good']");
    for (var i = 0; i < sons.length; i++) {
        var str = sons[i].value;
        console.log("第三种方式:"+str);
    }
})
</script>

回车事件

<script type="text/javascript">
// 回车事件
document.onkeydown=function(e){
    let keycode=document.all?event.keyCode:e.which;
    if(keycode==13){
        alert("nice");
    }
};
// 或者
$("body").keydown(function() {
    if (event.keyCode == 13) {//keyCode=13是回车键
    alert("nice");
    }
});
// 回车绑定事件
$("body").keydown(function() {
    if (event.keyCode == 13) {//keyCode=13是回车键
        serachInfo();
    }
});
function serachInfo(){
    alert("进入serachInfo方法");
}
</script>

光标定位

<script type="text/javascript">
//光标定位
$("#search").focus();
</script>

title 换行

image

 <!-- 加入换行符即可：&#10; -->
<p style="color:orangered;" title="消&#10;消&#10;乐">消遣娱乐</p>
posted @ 2019-10-15 09:45  踏步  阅读(134)  评论(0)  编辑  收藏  举报