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