jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>adfasfdadfa</h1> <p>asdfadfafdafafda</p> <p>11111111111111</p> <p>222222222222222</p> <p>33333333333333333</p> <button id="hide" type="button">隐藏</button> <button id="show" type="button">显示</button> <button id="toggle" type="button">显示下拉菜单</button> <a href="http://www.baidu.com"> 百度</a> <a href="http://www.sohu.com"> 搜狐</a> <select> <option value="v1">V1</option> <option value="v2">V2</option> <option value="v3">V3</option> </select> <div id="div1">中华医学会</div> <div id="div2">心医网</div> <div id="div3">心医堂</div> <script type="text/javascript" src="jquery-2.2.3.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#hide").click(function () { $("p").hide(1000); }); $("#show").click(function () { $("p").show() }); }); $("select").change(function () { var selet_opt = $(this).children("option:selected").val() console.log(selet_opt) console.log($(this).text()) }) var urlw1 = $("[href$='.baidu.com']"); console.log(urlw1); $(document).ready(function () { $("#toggle").click(function () { $("#div1").fadeToggle(); $("#div2").fadeToggle(); $("#div3").fadeToggle(); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border: red solid; } .c2{ font-size: 50px; } </style> </head> <body> <div class="c1">aaaa</div> <div class="c1">bbbbb</div> <div class="c1">ccccc</div> <div class="c1">dddd</div> <div class="c2">1111</div> <input name='username' type="checkbox" value="" />aaaa <button type="button">点我呀</button> <script type="text/javascript" src="jquery-2.2.3.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $(".c1").toggleClass("c2") }) }) </script> </body> </html>
$(document).ready(function () { $("#button2,#button3").click(function () { var name = $(this).attr("id") if(name == "button2"){ $("p").append("fengjian") }else { $("p").append("123123") } }) }) $(document).ready(function () { $("#button2,#button3").click(function () { var name = $(this).attr("id") if(name == "button2"){ $("p span").text(" fengjian") }else { $("p span").text(" 123123") } }) }) $(document).ready(function () { $("select").change(function () { var name =$("select").children("option:selected").val() console.log(name) }) })
搜索框 $(document).ready(function () { $("#tip").focus(function () { var id = $(this) id.addClass('black') if(id.val() == "请输入关键字" || id.val().trim()==""){ id.val("") } }) }) $(document).ready(function () { $("#tip").blur(function () { var id = $(this) id.addClass('black') if(id.length == 0|| id.val().trim()==""){ id.val('请输入关键字'); id.attr("class","gray") } }) })