入门
<!DOCTYPE html> <html> <head> <script src="scripts/jquery-1.7.1.min.js"></script> <script> onload = function(){ $('#btnShow').attr('href', 'http://www.baidu.com'); } </script> </head> <body> <a id="btnShow">超链接</a> <img src="1470107537.png" /> </body> </html>
属性操作
<!DOCTYPE html> <html> <head> <script src="scripts/jquery-1.7.1.min.js"></script> <script> function fun(){ alert($('#btnShow').attr('value'));//取属性 $('#btnShow').removeAttr('value');//移除属性 location = "http://www.baidu.com";//重定位 } onload = function(){ $('#btnShow').attr('onclick', 'fun()');//添加属性 } </script> </head> <body> <input type="button" id="btnShow" value="按钮" /> <img src="1470107537.png" /> </body> </html>
事件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="scripts/jquery-1.7.1.min.js"></script> <script> //为window的onload事件注册处理函数，表示“页面加载完成”后触发执行 onload = function () { alert('JS方式加载完成');//排在最后 }; //jQuery方式:DOM就绪，表示“标签”加载完成后执行此代码 $(document).ready(function () { alert('jQuery方式加载完成'); }); $(function () { // alert('简写方式'); //$('#btnShow').onclick = function () { //不可多播事件 //}; $('#btnShow').click(function () { alert('牛逼'); }); }); </script> </head> <body> <input type="button" id="btnShow" value="显示" /> </body> </html>
合成事件
//合成事件 $('#btnShow').hover(function () {//光标指向 this.style.color = 'red'; }, function(){//光标移开 this.style.color = 'blue'; }); $('#btnShow').toggle(function () {//第一次点击后 alert(1); }, function () {//第二次点击后 alert(2); }, function () {//第三次点击后 alert(3); }); $('#btnShow').one('click', function () { //执行一次便失效点击事件 });
省市联动
<!DOCTYPE html> <html> <head> <script src="scripts/jquery-1.7.1.min.js"></script> <script> var datas = { "北京" : ["朝阳", "海淀", "昌平", "丰台"], "山东" : ["青岛", "济南", "烟台"], "山西" : ["大同", "太远", "运城", "长治"], "河南" : ["洛阳", "开封", "郑州", "驻马店"], "河北" : ["石家庄", "张家口", "保定"] }; $(function(){ var select = $('<select id="selectProvince"></select>'); select.change(function(){ //找到市信息 var citys = datas[$(this).val()]; $('#selectCity').empty(); $.each(citys, function(index, item){ $('<option value="'+item+'">'+item+'</option>').appendTo($('#selectCity')); }); }); select.appendTo('body'); //jQuery遍历 $.each(datas, function(key, value){ $('<option value="'+key+'">'+key+'</option>').appendTo(select); }); var selectCity = $('<select id="selectCity"></select>').appendTo('body'); var pro = $('#selectProvince').val(); var citys = datas[pro]; $.each(citys, function(index, item){ $('<option value="'+item+'">'+item+'</option>').appendTo(selectCity); }); }); </script> </head> <body> </body> </html>
样式
//设置样式 $('#but').css('background-color', 'red'); $('#but').css({ 'color' : 'blue', 'font-size' : '20px' }); });
链式语法测试
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="scripts/jquery-1.7.1.min.js"></script> <script> $(function () { $('li').hover(function () {//移上 $(this).css('background-color', 'red') .prevAll()//找到当前节点之前的所有节点，破坏了链式结构 .css('background-color', 'orange') .end()//恢复最近一次链的破坏 .nextAll() .css('background-color', 'blue'); }, function () {//移开 $(this).css('background-color', 'white') .siblings().css('background-color', 'white');//获取左右的兄弟节点 }); }); </script> </head> <body> <ul> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> </ul> </body> </html>
总结
