JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器 - 博客伍六七

pandam 2021-08-02 原文

JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

今天学习了jQ,jQ对js的帮助很大，菜鸟教程上也有属性。可以查看

    js 和 jquery主要的区别在 dom
   想用jquery 必须先引入（顺序问题）
       先css 再js：     先框架css再自己css 先jquery 再框架在自己

鼠标移动到div和修改ipt中弹窗

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移动到div和修改ipt中弹窗</title>
<script type="text/javascript">
    function show(){
        /*var str=document.getElementById("a").value;
        alert(str);*/
        alert("aaa");
    }
</script>
</head>

<body>
<form action="#" onSubmit="show()">
    <input type="text" value="aa" onSelect="show()">
    <input type="text" value="bb" onChange="show()">
    <input type="text" value="cc" onFocus="show()">
    <input type="text" value="dd" onBlur="show()" id="a">    
    <input type="submit" value="提交">
</form>
<div style="width: 200px;height: 200px;background: red" onMouseOver="show()"></div>
</body>
</html>

JQ选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQ选择器</title>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
</head>

<body>
<p id="p1">a</p>
<p class="p2" align="center">b</p>
<p class="p2">c</p>
<p class="p2">d</p>
<div>
    <p>e</p>
    <p>f</p>
</div>
<input type="text" value="aaaaaaaa">
</body>
<script type="text/javascript">
    /*id选择器*/
    /*var p1=$("#p1");
    alert(p1.html());*/
    /*class选择器*/
    /*var arr=$(".p2");
    alert(arr.length);*/
    /*元素选择器*/
    /*var arr=$("p");
    alert(arr.length);*/
    /*父子关系选择器*/
    /*var arr=$("div p");
    alert(arr.length);*/
    /*属性选择器*/
    /*var obj=$("[align=\'center\']");
    alert(obj.html());*/
    /*如果得到的是数组，则用jqDom.eq(下标)*/
    /*alert($(".p2").eq(0).html());*/
    //获取js对象   js->jquery   $(jsDom)
    /*var p1=document.getElementById("p1");
    alert($(p1).html());*/
    //获取jQuery对象 jquery->js   $(\'div\')[0]    $(\'div\').get(0)
    /*alert($(".p2").get(1).innerHTML);*/
    //给非表单元素赋值
    /*$("#p1").html("你好");*/
    //获取表单的value值
    /*alert($("input").val());*/
    //给表单元素赋值
    $("input").val("bbbbbbbb");
</script>

</html>

JQ获取元素属性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQ获取元素属性</title>
</head>

<body>
    <input type="text" value="aaa" id="in" aaa="bbb">
</body>
<script type="text/javascript">
    //1.获取元素属性值：元素对象.属性名
/*    var v=document.getElementById("in").value;
    alert(v);*/
    //2.获取元素属性值：元素对象.getAttribute("属性名");
    /*var inp=document.getElementById("in");
    var v=inp.getAttribute("aaa");
    alert(v);*/
    //给元素属性赋值
    var inp=document.getElementById("in");
    inp.setAttribute("value","cccc");
</script>
</html>

CSS鼠标变小手

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS鼠标变小手</title>
<style>
    #d1{
        height:200px;
        width: 200px;
        background: red;
    }    
    #d1:hover{
        /*鼠标变小手*/
        cursor:pointer;
    }
</style>
</head>

<body>
    <div id="d1"></div>
</body>
</html>

JS通过名字找到属性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS通过名字找到属性</title>
<script type="text/javascript">
    window.onload=function(){
//        通过id属性找元素(得到y一个元素对象)
        var doc=document.getElementById("p")
    //     通过class属性找元素(得到一个数组)
    var arr=document.getElementsByClassName("p1")
    alert(arr[1].innerHTML)    
//    通过元素名称找元素(得到一个数组)
    var arr2=document.getElementById("p")
    }
;
    </script>
</head>

<body>
<p class="p1">a</p>
<p class="p1">b</p>
<p class="p1">c</p>
<p class="p">d</p>
</body>
</html>