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

时间：2022-01-26 06:40:01

今天学习了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>

相关文章