一、表单事件
1.focus() 获取焦点时触发
2.blur() 失去焦点时触发
3.change() 当内容改变时触发（只适用于text类型的input，textarea，select）
4.select() 当文本被选中是触发（适用于text类型的input或者是textarea）
5.submit() 当表单提交时会触发submit事件，该事件只适用于表单。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> </head> <body> <form> <input type="text"/> <input type="password"/> </form> </body> <script> $(function () { $("input").focus(function(){ $(this).css({ "color":"red", "background":"white" }); }); $("input").blur(function () { $(this).css("background","pink"); }) }) </script> </html>
当text和password获得焦点和是去焦点时，会改变样式。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <Script src="../jquery-3.2.1.min.js"></Script> </head> <body> <form action=""> <input type="text"/> </form> <textarea cols="30" rows="10"></textarea> <select> <option value="first">first</option> <option value="second">second</option> </select> </body> <script> $(function () { $("form [type|='text']").change(function () { $(this).css("color","Red"); }); $("textarea").change(function () { $(this).css("background","pink"); }); $("select").change(function () { $(this).css("color","red"); }) }) </script> </html>
当text类型的input，textarea和select中的内容改变时，会改变相应的样式。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> </head> <body> <form action=""> <input type="text" placeholder="hello"/> </form> </body> <script> $(function () { $("input").select(function () { $(this).css("color","red"); }) }) </script> </html>
当文本被选中时，改变其样式（只适用于text类型的input和textarea）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../jquery-3.2.1.min.js"></script> </head> <body> <form id="target"> <input type="submit" value="go"/> </form> </body> <script> $(function () { $("#target").submit(function () { document.write("hello"); }) }) </script> </html>
当表单进行提价操作时，触发submit事件。
二、DOM属性
1.addClass() 添加类
2.attr() 添加或者获取属性
3.hasClass() 检测是否拥有某个类
4.html() 获取元素的内容或者添加内容
5.prop() 改变或者是获取某个属性的属性值
6.removeAttr()移除某个属性
7.removeClass()移除某个类
8.removeProp()移除某个属性的属性值
9.toggleClass()更改类，当指定的类存在时移除，不存在时添加
10.val() 获取或改变元素的value值，通常用在input上