【jquery引用字段】
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <div id="MyDiv" class="myClass"> <p></p> </div> <input type="button" name="username" /> <!--引用jQuery文件--> <script src="js/jquery-1.8.3.js"></script> <script> //id选择器:查找id为MyDiv的标签 $('#MyDiv'). //标签选择器：查找所有的div标签 $('div'). //class选择器：查找所有class为myClass的标签 $('.myClass') //层级选择器：div标签下的p标签 $('div p') //查找input标签name等于username，并且属性值为button的标签 $('input[name="username"]').attr('button',true) </script> </body> </html>
【jquery字段参数】
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <div id="MyDiv" class="myClass">123<a>hello</a></div> <input name="username" type="text" value="9999" /> <input type="checkbox" /> <!--引用jQuery文件--> <script src="js/jquery-1.8.3.js"></script> <script> //加参数是赋值，不加参数是取值 $('#MyDiv').text; //获取id为MyDiv的文本内容----123 $('#MyDiv').text('haha'); //为id为MyDiv的标签添加文本内容 $('#MyDiv').html; //获取id为MyDiv的html内容----<a>hello</a> $('#MyDiv').html('<p>hehe</p>'); //为id为MyDiv的标签添加html内容 $('input[name="username"]').val //获取name为username的input标签的value值 $('input[name="username"]').val('sb') //为name为username的input标签的value赋值 $('input[name="username"]').attr('name') //获取name为username的input标签的name属性的值 $('input[name="username"]').attr('name','Macoli') //修改name为username的input标签的name属性的值为Macoli $('input[type="checkbox"]').prop('checked',true) //选中所有的复选框（true为选中，fals为不选中，默认不选中） $('input[type="checkbox"]').prop('disabled',true) //禁用所有的复选框（true为禁用，false为不禁用，默认不禁用） </script> </body> </html>
【jquery给html标签添加css】
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> .c1{ border: 1px solid red; } .c2{ font-size: 50px; } </style> </head> <body> <div id="MyDiv" class="c1">hello</div> <input type="button" value="点击" onclick="Foo()" /> <p>hello</p> <!--引用jQuery文件--> <script src="js/jquery-1.8.3.js"></script> <script> //给p标签设置css $('p').css({'color':'red','font-size':'50px'}); function Foo() { $('.c1').toggleClass('c2'); //每次执行的时候交替添加、删除c2 } //$('.c1').addClass('c2'); //为所有class为c1的标签再加一个c2的class（c1和c2同时存在） </script> </body> </html>
【jquery常用函数】
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> .returnTop{ position: fixed; width: 32px; height: 35px; right: 20px; bottom: 20px; background-color: red; color: white; } .hide{ display: none; } </style> </head> <body> <!--返回顶部功能实现--> <!-- <div id="return_top" class="returnTop hide" onclick="Go()">返回顶部</div> --> <div id="return_top" class="returnTop hide">返回顶部</div> <div style="height: 10000px"></div> <!--引用jQuery文件--> <script src="js/jquery-1.8.3.js"></script> <script> //当页面框架加载完成后，默认执行该函数 $(function () { $('#return_top').click(function () { $(window).scrollTop(0); //设置页面返回顶部 }) }) //当页面滚动条变化时，执行的函数（每滚动一次，函数就执行一次） $(window).scroll(function () { var height = $(window).scrollTop(); //获取滚动条离顶部的距离 if (height>0){ //显示返回顶部图标（或文字） $('#return_top').removeClass('hide'); //去除hide }else { //隐藏返回顶部图标（或文字） $('#return_top').addClass('hide'); } }) /* function Go() { $(window).scrollTop(0) //设置页面返回顶部 } */ </script> </body> </html>
【jquery添加删除内容】
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> </style> </head> <body> <p>I would like to say:<span></span></p> <input type="button" value="追加1" id="addid1" /> <input type="button" value="追加2" id="addid2" /> <!--引用jQuery文件--> <script src="js/jquery-1.8.3.js"></script> <script> //append():内容后面追加 prepend():内容前面追加 //appendto(content):把标签追加到content中（参数content也是一个标签，可以自定义） //empty():清空标签的所有内容(标签还在) //remove():删除标签（包括内容） //页面框架加载完成后执行的函数 $(function () { $('#addid1,#addid2').click(function () { //获取当前点击的标签Id var currentId = $(this).attr('id') if (currentId=='addid1') { //$('p').append('Alex '); //往p标签中追加内容 $('p span').text('Alex'); //往p标签下的span标签中添加内容 }else if (currentId=='addid2'){ //$('p').append('Macoli '); //往p标签中追加内容 $('p span').text('Macoli'); //往p标签下的span标签中添加内容 } }) }) </script> </body> </html>
【jquery操作元素焦点】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js</title> <style> .gray{ color: gray; } .black{ color: black; } </style> </head> <body> <!--事件：onblur()：元素失去焦点 onfocus()：元素获得焦点--> <input type="text" class="gray" id="tip" value="请输入关键字" /> <script src="js/jquery-1.8.3.js"></script> <script> //页面框架加载完成后执行的函数 $(function () { //获取焦点 $('#tip').focus(function () { var id = $(this); id.addClass('black'); if (id.val()=='请输入关键字'||id.val().trim()=='') { //trim()函数：清除字符串的空格 id.val(''); } }) //失去焦点 $('#tip').blur(function () { var id = $(this); var val = id.val(); if (val.length==0||val.trim()==''){ id.val('请输入关键字'); id.addclass('gray'); }else { id.adclass('black'); } }) }) </script> </body> </html>
【jquery操作多选框的全选、不选、反选功能】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js</title> </head> <body> <!--设置全选、不选、反选选项功能--> <div id="checklist"> <input type="checkbox" value="1" />篮球 <input type="checkbox" value="2" />足球 <input type="checkbox" value="3" />羽毛球 </div> <input type="button" value="全选" id="selectAll" /> <input type="button" value="不选" id="unselectAll" /> <input type="button" value="反选" id="reverseAll" /> <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> //页面框架加载完成后执行的函数 $(function () { $('#selectAll').click(function () { //:checkbox和input[type=='checkbox']等价 //$('#changelist :checkbox').attr('checked',true); $('#checklist input[type="checkbox"]').attr('checked',true); }) $('#unselectAll').click(function () { $('#checklist :checkbox').attr('checked',false); }) $('#reverseAll').click(function () {//反选 //each：循环个标签，每个标签都执行函数 $('#checklist :checkbox').each(function () { //获取标签是否被选中的信息，如果被选中，设置为取消选中；如果没被选中，设置为选中 $(this).attr('checked',!$(this).attr('checked')); }) }) }) </script> </body> </html>
【jquery操作菜单，选中菜单才显示子菜单】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js</title> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.6.3/css/font-awesome.css"> <style> .hide{ display: none; } </style> </head> <body> <!--菜单选中显示子菜单，不选中不显示功能--> <div class="container"> <div> <div class="title">Menu1<i class="fa fa-beer" aria-hidden="true"></i></div> <div class="body hide"> <a href="">content1</a><br/> <a href="">content2</a><br/> <a href="">content3</a> </div> </div> <div> <div class="title">Menu2<i class="fa fa-pencil-square-o" aria-hidden="true"></i></div> <div class="body hide"> <a href="">content1</a><br/> <a href="">content2</a><br/> <a href="">content3</a><br/> </div> </div> </div> <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> //页面框架加载完成后执行的函数 $(function () { $('.title').click(function () { //当前标签的父标签的其他平级标签的class为body的子标签添加hide $(this).parent().siblings().children('.body').addClass('hide') //去掉当前标签的下一个标签的hide $(this).next().removeClass('hide') }) }) </script> </body> </html>
【jquery选中不同标签显示不同内容】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js</title> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.6.3/css/font-awesome.css"> <style> li{ float: left; list-style: none; margin-right: 10px; } .current{ background-color: wheat; } .hide{ display: none; } </style> </head> <body> <div class="container"> <div class="tab-menu-box1"> <div class="menu"> <ul id="tab-menu-title" style="overflow: hidden;"> <li class="current" content-to="1">价格趋势</li> <li content-to="2">市场分析</li> <li content-to="3">其他</li> </ul> </div> <div id="tab-menu-body" class="content"> <div content="1">content1</div> <div content="2" class="hide">content2</div> <div content="3" class="hide">content3</div> </div> </div> </div> <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> //页面框架加载完成后执行的函数 $(function () { ChangeTab('#tab-menu-title','#tab-menu-body'); }) function ChangeTab(title,body) { $(title).children().click(function () { var $menu = $(this); var contentvalue = $(this).attr('content-to'); var $content = $(body).find('div[content="' + contentvalue + '"]'); $menu.addClass('current').siblings().removeClass('current'); $content.removeClass('hide').siblings().addClass('hide') }) } </script> </body> </html>
【jquery使滚动条一直处于底部】
<!--chat-message是标签的class名--> $('.chat-message').scrollTop($('.chat-message')[0].scrollHeight);
