《锋利的 jQuery（第2版）》

jQuery兼容于所有主流浏览器, 包括Internet Explorer 6
jQuery 版本 2 以上不支持 IE6，7，8 浏览器。
如果需要支持 IE6/7/8，那么请选择1.9

您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

文档就绪事件

jQuery 入口函数与 JavaScript 入口函数的区别： jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。 JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery 入口函数:
$(document).ready(function(){// 开始写 jQuery 代码...});
$(function(){// 开始写 jQuery 代码...});
--------------------------
JavaScript 入口函数:
window.onload = function () {// 执行代码
}

jQuery 选择器

1.基本选择器$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器2.层次选择器$("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器3.过滤选择器(重点)$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li3.2内容过滤选择器$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素3.3可见性过滤选择器$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素3.4属性过滤选择器$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素3.5状态过滤选择器$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option4.表单选择器$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

css选择器有哪些类型？

1、标签选择器（如：body,div,p,ul,li）。2、.类选择器（如：class="head",class="head_logo"） 。3、ID选择器（如：id="name",id="name_txt"）。4、全局选择器（如：*号）。5、.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）。6、.继承选择器（如：div p,注意两选择器用空格键分开）。7、伪类选择器（如：就是链接样式,a元素的伪类，
4种不同的状态：link、visited、active、hover。）。

获得内容 - text()、html() 以及 val()

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

jQuery - 添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery remove() 方法删除被选元素及其子元素。
jQuery empty() 方法删除被选元素的子元素。

jQuery - 获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

思考题

var a = 7;
$(function(){alert(8)
})
alert(7)
结果//7,8

jquery与其他库相冲突

var $j = JQuery.noConflict();

// 如果table下tbody中的每一行下的每一列的checkbox没有禁选

$('#table>tbody>tr:has(td:has(:checkbox:enabled))').css('background':'red');

dom

var checks = document.getElementById('checks')alert(checks.checked)

jquery

$(obj).is(':checked')?alert(true):alert(false);

$('.list>a').click(function(){$(this).addClass('current').next().show().parent().siblings().children('a').removeClass('current').next().hide();return false;})

jquery转dom 对象

var rc = $('#rc');var rcs = rc.get(0)var rcs = rc[0];alert(rcs.innerHTML)

dom转jquery

var op = document.getElementById('rc')alert($(op).text())

jquery 判断元素是否存在用下面的方法，而直接使用$("#rc")无法进行准确判断，因为它获取的永远是对象

if ($('#rc').length>0) {alert('yes')}

dom实现案例

var btn = document.getElementById('btn');btn.onclick=function () {var arr = new Array,checks = document.getElementsByName('check');for (var i = 0; i < checks.length; i++) {if(checks[i].checked){arr.push(checks[i].value)}}alert('选中的个数'+arr.length)}var legs = document.getElementById('tab')var tbody = legs.getElementsByTagName('tbody')[0]var tr = tbody.getElementsByTagName('tr')for (var i = 0; i <tr.length; i++) {if (i%2==0) {tr[i].style.color = 'red'}}

选择器–过滤选择器

基本过滤选择器

基数

$('div:even').css('background','red')

偶数

$('div:odd').css('background','green')

可见元素

$('div:visible').css('fontSize','25px')

filter内容过滤选择器

$('ul li').filter(":contains('nihaoss')").css('background','green')

表单过滤选择器

$('#dis:disabled').val('发生变化了')

注意加空格是—选取select里面选中的

alert($('select :selected').text())

选取其自身的selected

alert($('option:selected').text())// 同上
alert($('input:text').length)
如:$('#form :text').length

如何获取input

var legs = $('input[name=check]:checked').lengthalert(legs)

判断元素是否可见

if ($('#dis').is(':visible')) {alert('可见元素')}

操作dom

//dom-core//document.getElementById('de')....
//html-dom//element.src ...
//css-dom//element.style.color='red'...

动态插入节点

var ul = '<ul><li>1</li><li>2</li><li>3</li></ul>';//$('.div').append(ul); --向后//$(ul).appendTo($('.div'))$('.div').prepend(ul)//$(ul).prependTo('.div')//$('.div').after(ul)--------------------结构外部的追加到下一个兄弟节点//$('.div').before(ul)//$(ul).insertBefore('.div')

删除元素

// $('ul li:eq(0)').remove()--全删//detach()--也是删除，但是会保留元素的事件--不全删保留事件//empty()$('ul li:eq(2)').empty()//当前元素所有的后代元素清空

复制节点

典型的拖动商品到购物车

$(this).clone(true).appendTo('body');
//克隆元素如果是true绑定的事件一同复制

offset（）方法

获取元素在当前视窗的相对偏移，即top,left 只对可见元素有效

属性操作

追加样式

 $("p").addClass('jk')

1、如果给一个元素添加多个class那么就等于合并了他们的样式

2、如果有不同的class设定了同一个属性值，则后者覆盖前者。

移除样式

$('p').removeClass('jk')

toggleClass

如果类名存在则删除它，如果类名不存在则添加它

 $('p').toggleClass('jk')

样式是否存在

 $('p').hasClass('jk')
等同于如下方法：$('p').is('.jk')

html-text-innerHTML

注意：

1、javascript中的innerText属性并不能在火狐浏览器下运行，而jQuery的text方法支持所有浏览器

val()

 this.defaultValue     //当前文本的默认值

遍历节点

children（）只考虑子元素，不考虑后代元素

next（）下一个相邻的同辈元素

prev（）上一个相邻同辈元素

siblings（）前后所有的同辈元素

parent（）父元素

parents（）返回多个父元素节点

closest（）同parents 类似但，只返回匹配的第一个元素节点

dom操作案例

<p><a href="###" class="tooltip" title="这是我的超链接提示1">提示1</a></p><script src="jquery-1.8.2.min.js"></script><script>$(function(){var x = 10,y=20;$(' a.tooltip').hover(function(e){this.myTitle = this.titlethis.title = '';var div = '<div id="tooltip">'+this.myTitle+'</div>'$('body').append(div);$('#tooltip').css({'top':(e.pageY+y)+'px','left':(e.pageX+x)+'px'}).show('fast')},function(){this.title=this.myTitle;$('#tooltip').remove()})})</script>

jquery 事件

$(window).load(function(){}) 相当于 window.onload=function{}

$('.panel h2').bind('click',function(){if ($(this).next().is(':visible')) {$(this).next().hide()}else{$(this).next().show()}})

下面toggle 方法的实现方式 toggle 模拟鼠标连续点击事件

$('.panel h2').toggle(function(){//$(this).next().show()$(this).next().toggle()},function(){// $(this).next().hide()  == 如果元素是显示的就让其隐藏，隐藏的就让其显示$(this).next().toggle()})

事件冒泡

$('#span1').bind('click',function(e){alert('span')//e.stopPropagation()  //阻止冒泡return false     //return false 可以阻止冒泡和 默认行为})$('.wai').bind('click',function(){alert('wai')})

移除绑定事件

$('#span').bind('click',myfun = function(){alert(1)}).bind('click',myfun2 = function(){alert(2)})$('.panel h2').bind('click',function(){$('#span').unbind('click',myfun2)})

模拟事件

// $('#span').trigger('click')//触发自定义事件$('.btn').bind('my',function(e){alert('我的自定义'+e)})$('.btn').trigger('my',1)// $('input').trigger('focus')  自动获取焦点$('input').triggerHandler('focus')  .//只是执行事件

dom案列动态切换展示##

*{margin: 0;padding:0;}img{width: 100px;height: 100px;}li{float: left;list-style: none;}.v_content{width: 400px;height: 138px;overflow: hidden;position: relative;}ul{position: absolute;left:0;}a{display: block;width: 100%;}.fl{float: left;}.fr{float: right;}.v_caption{width: 400px;}.v_show{margin: 0 auto;width: 400px;}.next{background-color: #fd5004;color:#fff;cursor: pointer;}.current{color:#fd5004;}

html

<div class="v_show"><div class="v_caption"><h2 class="cartion fl">卡通动漫</h2><div class="highlight_tip fl"><span class="current">1</span><span>2</span><span>3</span><span>4</span></div><div class="change_btn fl"><span class="prev">上一页</span><span class="next">下一页</span></div><em class="fr"><a href="###">更多></a></em></div><div class="v_content"><ul class="v_content_list"><li><a href="###"><img src="./img/img-1.jpg" alt=""></a><h4><a href="###">海贼王1</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-2.jpg" alt=""></a><h4><a href="###">海贼王1</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-3.jpg" alt=""></a><h4><a href="###">海贼王1</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-4.jpg" alt=""></a><h4><a href="###">海贼王1</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-5.jpg" alt=""></a><h4><a href="###">海贼王2</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-1.jpg" alt=""></a><h4><a href="###">海贼王2</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-5.jpg" alt=""></a><h4><a href="###">海贼王2</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-1.jpg" alt=""></a><h4><a href="###">海贼王2</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-1.jpg" alt=""></a><h4><a href="###">海贼王3</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-2.jpg" alt=""></a><h4><a href="###">海贼王3</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-3.jpg" alt=""></a><h4><a href="###">海贼王3</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-4.jpg" alt=""></a><h4><a href="###">海贼王3</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-1.jpg" alt=""></a><h4><a href="###">海贼王4</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-2.jpg" alt=""></a><h4><a href="###">海贼王4</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-3.jpg" alt=""></a><h4><a href="###">海贼王4</a></h4><span>播放：<em>28,267</em></span></li><li><a href="###"><img src="./img/img-4.jpg" alt=""></a><h4><a href="###">海贼王4</a></h4><span>播放：<em>28,267</em></span></li></ul></div></div>

<script>$(function(){var page = 1,i = 4;var parent = $('.v_show');var v_show = parent.find('.v_content_list');var v_content = parent.find('.v_content');var v_width = v_content.width();var len = v_show.find('li').length;var page_count = Math.ceil(len/i)  //4$('span.next').click(function(){if (!v_show.is(':animated')) {if (page == page_count) {v_show.animate({left:'0px'},'slow')page = 1}else{v_show.animate({left:'-='+v_width},'slow')page++;}$('.highlight_tip span').eq((page-1)).addClass('current').siblings().removeClass('current')}})$('span.prev').click(function(){if (!v_show.is(':animated')) {if (page == 1) {v_show.animate({left:'-='+v_width*(page_count-1)},'slow')page = page_count}else{v_show.animate({left:'+='+v_width},'slow')page--;}$('.highlight_tip span').eq((page-1)).addClass('current').siblings().removeClass('current')}})})</script>

dom tab选项卡

*{margin: 0;padding:0;}.tab{width: 500px;border:6px solid #ff5004;height: 300px;margin: 0 auto;}ul{width: 100%;height: 30px;}li{width: 10%;float: left;line-height: 30px;height: 30px;background-color: green;color: #fff;margin-right: 10px;font-size: 24px;list-style: none;cursor: pointer;}li.selected{background-color: blue;}.tab_box{width: 100%;border-top: 5px solid #000;}.hide{display: none;}.hover{background-color: blue;}

html

<div class="tab"><ul class="tab_menu"><li class="selected">北京</li><li>上海</li><li>深圳</li></ul><div class="tab_box"><div>北京，这个的首都</div><div class="hide">上海，中国的第一个现代化城市</div><div class="hide">深圳，中国的改革开放试验城市</div></div></div>

<script>$(function(){$('.tab_menu li').bind('click', function(){$(this).addClass('selected').siblings().removeClass('selected');let index = $(this).index() //拿到当前li在所有的li中的下标$('.tab_box>div').eq(index).show().siblings().hide()}).hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')})4})</script>

表单form 应用

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>*{margin: 0;padding:0;}#comment{height: 150px;overflow-y:auto;resize: none;}</style>
</head>
<body><form action=""><div class="msg"><span class="bigger">放大</span><span class="smaller">缩小</span><span class="top">向上</span><span class="down">向下</span><textarea name="" id="comment">此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化。</textarea></div></form><hr/></br><!-- form2 --><form action="">你爱好的运动是什么？</br><input type="checkbox" value="足球"/><input type="checkbox" value="篮球"/><input type="checkbox" value="羽毛球"/><input type="checkbox" value="乒乓球"/><input type="checkbox" id="checkAll" value="全 选/全不选" />全 选/全不选<input type="button" id="checkRev" value="反 选" /></form><form action=""><input type="text" class="require"><input type="submit" value="提交" id="send"></form><!-- table --><table><tr><td><input type="checkbox"></td><td>1</td><td>你好，长孙娜</td></tr><tr><td><input type="checkbox"></td><td>2</td><td>你好，娜</td></tr><tr><td><input type="checkbox" checked="true"></td><td>3</td><td>你好，长娜</td></tr></table><script src="jquery-1.8.2.min.js"></script><script>$(function(){var $comment = $('#comment')$('.bigger').click(function(){if (!$comment.is(':animated')) {if ($comment.height()<500) {$comment.animate({height:'+=50'},'slow')}}})$('.smaller').click(function(){if (!$comment.is(':animated')) {if ($comment.height()>50) {$comment.animate({height:'-=50'},'slow')}}})$('.top').click(function(){if (!$comment.is(':animated')) {$comment.animate({scrollTop:'-=50'},'slow')}})$('.down').click(function(){if (!$comment.is(':animated')) {$comment.animate({scrollTop:'+=50'},'slow')}})})// 复选框最基本的应用的就是，全选，反选。全不选$(function(){$('#checkAll').click(function(){$(':checkbox').prop('checked', this.checked)})$('#checkRev').click(function(){$(':checkbox').each(function(){this.checked = !this.checked})})})/*下拉框应用*/var options = $('#select option:selected')// 双击某个选项，添加给对方$('#slect').dblclick(function(){var options = $('option:selected', this)})/*表单验证*/$('form .require:input').blur(function(){if ($(this).is('#username')) {//...}else{console.log(1)}// if ($(this).is('#mail')) {}}).keyup(function(){$(this).triggerHandler('blur')}).focus(function(){// $(this).triggerHandler('blur')$(this).trigger('blur') //-----------------trigger 不仅会触发元素绑定事件，也会触发浏览器默认事件，而不会定位到文本框上})$('#send').click(function(){$('form :input').trigger('blur')})// $('tbody>tr:has(:checked)').addClass('on')// 另一种写法---装逼写法$('tbody>tr:has(:checked)')['addClass']('on');</script>
</body>
</html>

dom slice parseint 应用##

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>*{margin: 0;padding:0;}.msg{width: 500px;margin: 0 auto;}span{display: block;background-color: #fd5004;color:#fff;float: left;font-size: 26px;cursor: pointer;}.bigger{background-color: green;margin-right: 20px;}#para{clear: both;}</style>
</head>
<body><div class="msg"><div class="msg_caption"><span class="bigger">放大</span><span class="smaller">缩小</span></div><div><p id="para">这是一个明媚的早上，我吃过午饭前去招商银行办理公积金卡，下午不错洗洗衣服，开始写代码，人的一生就是不停的学习，很好，就是这样的。</p></div></div>    <script src="jquery-1.8.2.min.js"></script><script>$(function(){$('.msg_caption span').bind('click', function(){var fsz = $('#para').css('font-size')  //16pxvar parsFsz = parseInt(fsz, 10); // 第二位参数，取整let cName = $(this).attr('class');let unit = fsz.slice(2)  // 默认从0开始数，数到2后面的截取出来if (cName==='bigger') {parsFsz+=2}else{parsFsz-=2}$('#para').css('font-size',parsFsz+unit)})})</script>
</body>
</html>

table toggle :contains 应用

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>*{margin: 0;padding:0;}.on{background-color: #fd5004;}</style>
</head>
<body><label for="id">筛选</label><input type="text" id="id" value="2"><table width="500" border="1"><thead><tr><th>姓名</th><th>性格</th><th>住址</th></tr></thead><tbody><tr class="parent" id="row_01"><td colspan="3">其他设计组</td></tr><tr class="child_row_01"><td>王航</td><td>男</td><td>湖北</td></tr><tr class="child_row_01"><td>王2航</td><td>女</td><td>湖北</td></tr><tr class="child_row_01"><td>王航</td><td>男</td><td>湖北</td></tr><tr class="parent" id="row_02"><td colspan="3">其他设计组</td></tr><tr class="child_row_02"><td>王航</td><td>男</td><td>湖北</td></tr><tr class="child_row_02"><td>王2航</td><td>女</td><td>湖北</td></tr><tr class="child_row_02"><td>王航</td><td>男</td><td>湖北</td></tr><tr class="parent" id="row_03"><td colspan="3">其他设计组</td></tr><tr class="child_row_03"><td>王航</td><td>男</td><td>湖北</td></tr><tr class="child_row_03"><td>王2航</td><td>女</td><td>湖北</td></tr><tr class="child_row_03"><td>王航</td><td>男</td><td>湖北</td></tr></tbody></table><script src="jquery-1.8.2.min.js"></script><script>$(function(){$('.parent').click(function(){$(this).toggleClass('on').siblings('.child_'+this.id).toggle()})$('#id').keyup(function(){$('table tbody tr').hide().filter(":contains('"+( $(this).val() )+"')").show()}).keyup()})</script>
</body>
</html>

ajax 实例

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>*{margin: 0;padding: 0;}.form1{width: 500px;margin: 100px auto;}label{display: block;width: 100%;margin-bottom: 20px;}</style>
</head>
<body><input type="button" value="ajax提交" onclick="Ajax()"><div id="resTxt"></div><div id="load">加载中。。。。</div><hr/><form action="test.php" class="form1" method="post"><label>姓名：<input type="text" name="user"></label><label>内容：<textarea name="content" id=""></textarea></label><input type="submit" value="提交" name="button"></form><hr/><input type="button" value="$.getScript" id="getScript"><hr><input type="button" value="$.getJson" id="getJson"><div id="testjson"></div><hr><form action="" id="form2"><input type="checkbox" checked="true">12<input type="checkbox" checked="true">14<input type="radio">15<input type="radio">16<input type="submit" id="submit"></form><script src="jquery-1.8.2.min.js"></script><script>$(function(){/**ajax : 异步javascript XML*ajax  核心  XMLHttpRequest*load()  方法一般常用从服务器获取静态数据文件注意：get请求会将参数跟在URL后传递，post则是作为HTTP消息的实体内容发送给web服务器get通常不能大于2kb 数据会被浏览器缓存起来，会带来严重的安全性问题。$.ajax() 方法是jquery 最底层的Ajax对于表单提交数据多的情况下-----使用到序列化方法serialize()序列化数组----serializeArray()---返回json格式*/ $('form').submit(function(event){event.preventDefault()});$("form input[type='submit']").click(function(){var url = $('.form1').attr('action');var serialize  = $('.form1').serializeArray();console.log(serialize)$.post(url, serialize, function(res, status){if (status==200) {console.log(res)}})})})function Ajax(){// $('#resTxt').load('moduleHtml.html');$('#load').ajaxStart(function(){$(this).show()})$('#load').ajaxStop(function(){$(this).hide()})$('#resTxt').load('moduleHtml.html .tab_menu', function(res, status, XMLHttpRequest){console.log(res);console.log(status);}); //load 选择器 选择对应的class}$(function(){$('#getScript').click(function(){$.getScript('jquery.cookie.js', function(data){console.log(data)})})})$(function(){// $('#getJson').click(function(){//     $.getJSON('test.json', function(data){//      $('#testjson').empty();//         var html = '';//         $.each(data, function(index,item){//            console.log(index,item)//           html+='<div><h6>'//             +item['name']+'</h6><p>'//            +item['age']+'</p></div>';//          if (index ==2 ) {//               return false//          }//         })//        $('#testjson').html(html)//   })// })$('#getJson').click(function(){$.ajax({type: 'get',url:'test.json',dataType: 'json',success:function(data){$('#testjson').empty();var html = '';$.each(data, function(i, item){html+= '<div><h2>'+item['name']+'</h2><p>'+item['age']+'</p></div>';if (i == 1) {return false;}})$('#testjson').html(html)}})})})</script>
</body>
</html>

jquery.cookie.js 实战应用

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><link id="linkcss" rel="stylesheet" href="css/skin_01.css"><style>.select{background-color: #fff;font-size: 20px;}</style>
</head>
<body><ul class="color"><li id="skin_01">红色</li><li id="skin_02">绿色</li><li id="skin_03">橙色</li></ul>用户名：<input type="text" name='username' id="username" /><input type="checkbox" name='check' id='check' />记住我<script src="jquery-1.8.2.min.js"></script><script src="jquery.cookie.js"></script><script>$(function(){let $li = $('.color li');var cookie_skin = $.cookie('skinName');if (cookie_skin) {$('#'+cookie_skin).addClass('slected').siblings().removeClass('slected');$('#linkcss').attr('href','css/'+cookie_skin+'.css');}$li.click(function(){var id = $(this)[0].id$('#'+id).addClass('slected').siblings().removeClass('slected');$('#linkcss').attr('href','css/'+id+'.css');$.cookie('skinName', id, {path: '/', expires: 10});})})$(function(){var cookie_name = 'username';if ($.cookie(cookie_name)) {if ($.cookie(cookie_name) == 'null') {$('#username').val('')}else{$('#username').val($.cookie(cookie_name))}}$('#check').click(function(){if (this.checked) {$.cookie(cookie_name, $('#username').val(), {path: '/', expires: 10});}else{$.cookie(cookie_name, 'null', {path: '/'})}})})</script>
</body>
</html>

input placeholder 兼容写法

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>*{margin: 0;padding:0;}.focus{color:#999;}</style>
</head>
<body><input type="text" value="请输入商品名称"><script src="jquery-1.8.2.min.js"></script><script>$(function(){$('input[type="text"]').focus(function(){$(this).addClass('focus')if ($(this).val()===this.defaultValue) {$(this).val('')}}).blur(function(){$(this).removeClass('focus');if ($(this).val()==='') {$(this).val(this.defaultValue)}}).keyup(function(e){if (e.which == 13) {alert('提交表单')}})})</script>
</body>
</html>

jQuery 插件编写 dom##

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><title>tab</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>tbody>tr.odd{background-color: red;}tbody>tr.even{background-color: blue;}tbody>tr.selected{background-color: #fd5004;}</style>
</head>
<body><div class="red" style="color:red">NIKO4</div><hr><table border="1" id="table1"><thead><tr><th></th><th>1</th><th>2</th><th>3</th></tr></thead><tbody><tr><th><input type="checkbox"></th><th>lishijie</th><th>wangzi</th><th>juzi</th></tr><tr><th><input type="checkbox"></th><th>lishijie</th><th>wangzi</th><th>juzi</th></tr><tr><th><input type="checkbox"></th><th>lishijie</th><th>wangzi</th><th>juzi</th></tr><tr><th><input type="checkbox"></th><th>lishijie</th><th>wangzi</th><th>juzi</th></tr></tbody></table><table border="1" id="table2"><thead><tr><th></th><th>1</th><th>2</th><th>3</th></tr></thead><tbody><tr><th><input type="checkbox" checked="true"></th><th>lishijie</th><th>wangzi</th><th>juzi</th></tr><tr><th><input type="checkbox"></th><th>lishijie</th><th>wangzi</th><th>juzi</th></tr><tr><th><input type="checkbox"></th><th>lishijie</th><th>wangzi</th><th>juzi</th></tr><tr><th><input type="checkbox"></th><th>lishijie</th><th>wangzi</th>o<th>juzi</th></tr></tbody></table><script src="jquery-1.8.2.min.js"></script><script>//;(function($){})(jQuery)/*jQuery.extend 用来设置默认参数**********/var setting = { validate: false, limit: 5, name: 'lishijie'}var options = { validate: true, name: 'wangzi'}var newOptions = jQuery.extend(setting, options)  //console.log(newOptions);(function($){$.fn.extend({// 'color' :function(value){//  return this.css('color', value);// },'alertBgColor':function(options){options = $.extend({odd: 'odd',even: 'even',selected: 'selected'}, options);$('tbody>tr:odd', this).addClass(options.odd);$('tbody>tr:even', this).addClass(options.even);$('tbody>tr', this).click(function(){var hasSelected = $(this).hasClass(options.selected);$(this)[hasSelected? 'removeClass' : 'addClass'](options.selected).find(':checkbox').attr('checked', !hasSelected)})$('tbody>tr:has(:checked)', this).addClass(options.selected);return this //返回this , 使方法可链}})})(jQuery);$(function(){// $('.red').color('blue');$('#table2').alertBgColor({odd:'',even:'even', selected:'selected'}).find('th').css('color', 'green')})</script>
</body>
</html>

轮播图实战##

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><title>banner</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>*{margin: 0;padding:0;}.fl{float: left;}.fr{float: right;}img{width: 100%;height: 100%;display: block;}.banner{width: 550px;height: 320px;margin: 0 11px 0 0 ;overflow: hidden;position: relative;}.banner img{position: absolute;top:0;left:0;}.banner div{position: absolute;bottom: 0;overflow: hidden;}.banner div a{background: #444;display: inline-block;color: #fff;float: left;height: 32px;margin-right: 1px;overflow: hidden;padding: 5px 15px;text-align: center;width: 79px;}.banner div a:hover{text-decoration: none;}.banner div a.dor{background-color: #fd5004;}#footer a.dors{background-color: #fd5004;}.banner div a em{cursor: pointer;display: block;height: 16px;overflow: hidden;width: 79px;}.banner .last{margin: 0;width: 80px;}#imgWrap{display: block;width: 100%;height: 100%;}</style>
</head>
<body><div class="banner"><a href="#nogo" id="imgWrap"><img src="./img/img-1.jpg" alt="1"><img src="./img/img-2.jpg" alt="2"><img src="./img/img-3.jpg" alt="3"><img src="./img/img-4.jpg" alt="4"></a><div class="footer"><a href="###1" class="dor"><em>相约情人节</em><em>全场199元</em></a><a href="###2"><em>相约情人节</em><em>全场199元</em></a><a href="###3"><em>相约情人节</em><em>全场199元</em></a><a href="###4" class="last"><em>相约情人节</em><em>全场199元</em></a></div></div>        <div id="footer"><a href="###1"><em>相约情人节</em><em>全场199元</em></a><a href="###2"><em>相约情人节</em><em>全场199元</em></a><a href="###3"><em>相约情人节</em><em>全场199元</em></a><a href="###4"><em>相约情人节</em><em>全场199元</em></a></div><script src="jquery-1.8.2.min.js"></script><script>$(function(){var imgRoll = $('.footer a');imgRoll.css('opacity','0.7');var len = imgRoll.length;var index = 0;var adTimer = null;imgRoll.mouseover(function(){index = imgRoll.index(this);showImg(index)}).eq(0).mouseover()  //-----------------------默认调用//划入停止动画 划出开始动画$('.banner').hover(function(){if (adTimer) {clearInterval(adTimer)}},function(){adTimer = setInterval(function(){showImg(index);index++;if (index==len) {index = 0;}},2500)}).trigger('mouseleave')  //-------hover 对应两个事件 mouseenter mouseleave 鼠标移出时调用第二事件$(document).on('hover','#footer a', function(){    //电商图片放大镜位置效果$(this).toggleClass('dors')})})//显示不同的幻灯片function showImg(index){var banner = $('.banner');var bannera = banner.find('.footer a')var newHref = bannera.eq(index).attr('href');$('#imgWrap').attr('href',newHref).find('img').eq(index).stop(true,true).fadeIn().siblings().fadeOut();bannera.removeClass('dor').css('opacity','0.7').eq(index).addClass('dor').css('opacity','1')}// jquery 截取图片后缀方法实例$(function(){var imgSrc = $('#imgWrap').find('img').attr('src');console.log(imgSrc)var i = imgSrc.lastIndexOf('.')console.log(i)var unit = imgSrc.substring(i)console.log(unit)})</script>
</body>
</html>

jquery 性能优化

缓存对象
如果打算在其他函数中使用jquery 对象，可以缓存到全局环境
循环数组尽量使用简单的for 会使代码运行的更快
循环dom 结束后再操作，比如结束后再追加
尽量使用原生js

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>*{margin: 0;padding:0;}ul li{list-style: none;}</style>
</head>
<body><ul><li>jijijihaoni</li><li>jijijihaoni</li><li>jijijihaoni</li><li>jijijihaoni</li></ul><input type="checkbox" checked="true"> 1<script src="jquery-1.8.2.min.js"></script><script>window.$my = {head: $('head'),body: $('body')}// jquery 性能优化/**  1. 缓存对象*  2. 如果打算在其他函数中使用jquery 对象，可以缓存到全局环境*  3. 循环数组尽量使用简单的for 会使代码运行的更快*  4. 循环dom 结束后再操作，比如结束后再追加*  5. 尽量使用原生js *///2var script = document.createElement("li");$my.body.append(script);$('ul').click(function(e){var targera = $(e.target)console.log(targera)var js = targera.get(0);js.style.color = 'red';this.style.backgroundColor = '#fd5004'})var cr = $('input:checkbox');var newCr = cr[0]if (newCr.checked) {alert(1)}</script>
</body>
</html>

返回页面顶部

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.nav{margin-top: 600px;width:100%;border-right-color: goldenrod;height: 200px;}.content{margin-top: 1200px;width:100%;height: 300px;background-color:firebrick;}.go{width: 100%;height: 20px;background-color: gray;}</style>
</head>
<body><div class="nav"></div><div class="content"></div><div class="go">返回页面顶部</div><script src="jquery-1.8.2.min.js"></script><script>$(function(){$('.go').click(function(){$('body').scrollTo(500);return false;})})jQuery.fn.scrollTo = function(speed){var targetOffset = $(this).offset().top;$('html,body').stop().animate({scrollTop: targetOffset}, speed);return this;}</script>
</body>
</html>

自动隐藏不再使用定时器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>自动隐藏 不再使用定时器</title><style>.move{width: 100%;height: 200px;display: none;background-color: darkblue;}</style>
</head>
<body><div class="go">go</div><div class="move">hah</div><script src="jquery-1.8.2.min.js"></script><script>$(function(){$('.go').click(function(){$('.move').fadeIn(500).delay(3000).fadeOut(500)})})</script>
</body>
</html>