J.chong

1、jq先引入，base後引入，則$歸base所有，所以可定義一個來使用jquery

var $fn = jQuery; 
$(function(){
  alert($fn('#box'))
})

//或直接 
alert(jQuery('#box'))

2、jq後引入，則$歸jq，所以jq提供一個方法來剔除本身的$

jQuery.noConflict(); 
var $fn = jQuery
alert($fn('#box'))

選擇器

jq獲取id時，無論頁面上有多少個都只返回1個；

$('.box>p') ===  $('.box').children('p')  //即只看子選擇，孫子後失明
$('.box+p') === $('.box').next('p')
$('.box~p') === $('.box').nextAll('p')

find()/next()/nextAll()/children() 1、如果不傳參，相當於find('*'),影響性能，建議傳參 2、性能高於高級選擇器 $('.box').find('p'),性能最好 $('p','.box'),轉成1，慢5%-10% $('.box')children('p'),慢50% $('.box>p')慢70% $('.box p')慢77% $('p',$('.box'))慢23% var box = $('.box'); var p=box.find('p');性能會提升如jq有提供獨立的方法，優先推薦使用

pervUntil / nextUntil

$('.box').pervUntil('p').css() 
$('.box').nextUntil('p').css() //與.box同級，一直向下搜索，遇到p以前的所有元素都被css選中

a[title|=num] 具有這個屬性，或開頭屬性匹配後面一個 - 號的DOM
a[title!=num] 不等於這個屬性
a[title~=num] 具有這個屬性，且以空格分割的屬性
aabc 選取class=box,且存在bbb這個屬性

:not(.box)選取class不是box
:first :last需要指明哪個元素是父元素
:has(.box)選取有class為box
:parent選取有子元素或文本的元素

.has(.box)可提高性能
.parentsUntil('div')，遇到div父元素停止

:hidden
:visible

$('li:first-child')獲取每個父元素的第一個子元素

其他方法：

.is(s/o/e/f)
.hasClass()
$('li').slice(0,2)，選取從start到end位置的元素

$('div').contents() 獲取某個元素下面所有節點，包文本，如是iframe，則可查找文本內容

$('div').filter('.box')選擇div下面的.box元素

當然，filter也支持fn操作

$('div').filter(function(){
return ......
})

DOM操作

attr()裏的function(){}可不傳參，或只傳一個index,表示當前元素的索引0開始，
html(),text(),val(),is(),filter()，都可以使用使用fn返回，如集合，則可以傳index來獲取索引；
如：

$('#ul1 li').attr('class', function (index) {
    return 'pro'+index

})
removeAttr('title'),无法传递index 及 value

var boxColor = $('.box').css(['width','height','color'])
for(var i in boxColor){
  alert(i+'boxColor[i]')
}

特别留意：标签与class同名时：index相加，即两个对象要获得一一匹配，则需要传参数过滤类型：如：

<h5>hhhhhhhhhhhhhhh</h5>
<div class='h5'>dididididididididid</div>
<h5>hhhhhhhhhhhhhhh</h5>
<div class='h5'>dididididididididid</div>

        var _sh5 = $('*').find('h5');
        var _sch5 = $('*').find('.h5');
        _sh5.on('click',function(){
                _sch5.eq($(this).index('h5')).stop().slideToggle();
        });

$.each操作原生數組：

var arr = [1,2,3] //原生数组
var arrN = []
$.each(arr, function () {
   arrN.push(this+'1') //this指每个值
})
console.log(arrN);  [11,21,31]

$(function () {
    $('li').each(function (i, e) {
    console.log(i+':' + e.innerHTML);  
//注意,e代表DOM 元素，所以是js的方法innerHTML,不能使用html()
    })
})

var count = 0;
$('box').click(function () {
    $(this).toggleClass('red',count++%3==0)  
//传参数，返回布尔，点2次切换，相当于频率参数
})

特殊方法：

$('li').css('width', function (i, v) { //i表示索引，v表示当前dom所对应的属性值
    return (parseInt(v)-50)+'px'
})

$('.box').width() //不包

$('.box').innerwidth() //包内边距

$('.box').outerWidth() // padding+border

$('.box').outerWidth(true) //padding+border+margin

$('.box').offset().left //相对视口
$('.box').position().left //相对父元素
$(window).scrollTop() //滚动条位置

DOM节点

$('.box').append(function (i, html) {  //html表示.box未插入前原有的内容，不包括.box标签
    console.log(html);
    return '<strong>节点</strong>'
})

$('.box').prepend(function (i, html) {
    console.log(html);
    return '<strong>节点</strong>'
})

$('.box').wrapInner(function () {    //向box里的内容用<b></b>包起来
    return '<b>bbb</b>'
})

wrap() wrapAll()，前面把每个元素当成一个独立体，后者作为整体包住

$("button").click(function(){  //删除每个p的父级元素；
  $("p").unwrap();
});

.remove('.box')，移除指定.box
.datach()保留事件；
.empty()

节点被替换后所有事件都消失
$('.box').replaceWith('<strong></strong>') === $('').replaceAll($('.box')) 返回结果不同，[链式]，返回都是所操作的元素，即第一个元素；
另：reference = element.replaceChild(newChild,oldChild)

表單

如果是表单元素都必须含有name属性

:image所有图像按钮
:file所有文件按钮
:hidden所有不可见字段
$(':input')

:enabled 所有可见
:disabled 所有不可用
:checked 单选和复选
:selected 下拉

基础事件

注意：bind在1.7版本後推薦使用整合on

$('input').bind('mouseout mouseover',function(){  //移入移出分别执行一次
  $('div).html(function(i,v){
    return v+ '1'
  })
})

$('input').bind({
  'mouseout':function(){
    alert('out')
  },
  'mouseover':function(){
    alert('over')
  }
})

select()文本选定时触发，
change()文本改变时触发
submit()，在定要在form作用内才能触发；
mouseover mouseenter 穿过子节点是否触发
unload()新版不支持 ie支持，chrome不支持，一般用于清理工作；

keydown keyup返回键码，keypress返回字符编码；事件对像的keycode
keypress 返回的是字符编码，使用charCode

$('#i2').keyup(function (e) {
    console.log(e.keyCode);  //65 键码 
})

$('#i2').keypress(function (e) { //97 字符编码
    console.log(e.charCode);
})

hover == mouseenter mouseleaver
focus blur 必须是当前元素触发
focusin focusout 穿過子元素也會觸發，相當於mouseover mouseenter的區別；

//1.7後刪除的toggle切换功能，替換實現； 
var flag = 1
$('.box').on('click',function(){
  if(flag==1){
    $(this).css('color','#000')
    flag =2;
  }
  if(flag==2){
    $(this).css('color','#cd0000')
    flag =1;
  }
})

事件對像

<style>
.jq-tb{

width:100%;border-collapse: collapse

}
.jq-tb td{border:1px solid #ccc;padding:5px;}
.jq-tb tr>td:first-child{min-width: 100px;

text-align: center;}

</style>

e.type 獲取事件的類型，如click;

e.target 綁定DOM元素，所以如改變是innerHTML

e.data

添加額外數據，可以是num,str,arr,obj

$('p').on('click',123, function (e) {
    console.log(e.data);  //123
})

</td>

</tr>
<tr>
    <td>e.relatedTarget</td>
    <td>获取移入到box之前的那个dom元素

$('.box').mouseover(function(e){
  alert(e.relatedTarget)
})

</td>

</tr>
<tr>
    <td>e.currentTarget</td>
    <td>绑定的DOM元素，相当于this，区别与e.target

$('.box').click(function(e){
  e.currentTarget //
})

</td>
</tr>

<tr>
    <td>e.e.pageX/Y</td>
    <td>页面原点，一拉动滚动条，则肯定比clientX大</td>
</tr>
<tr>
    <td>e.screenX/Y</td>
    <td>相对于屏幕的位置</td>
</tr>
<tr>
    <td>e.clientX/Y</td>
    <td>可視區xy，與滾動條無關 </td>
</tr>
<tr>
    <td>e.result</td>
    <td>同一元素绑定事件上一个的return返回值；</td>
</tr>
<tr>
    <td>e.timeStamp</td>
    <td>时间戳</td>
</tr>
<tr>
    <td>e.which</td>
    <td>1、如果使用鼠標，則左1中2右3；<br />2、使用按鍵觸發，則返回keyCode</td>
</tr>
<tr>
    <td>e.altKey/e.shifeKey/e.ctrlKey/e.metaKey</td>
    <td>是否按下，true false</td>
</tr>

方法：

e.preventDefault()	取消默認行為
e.isDefaultPrevented()	是否調用e.preventDefault()方法
e.stopPropagation()	取消冒泡
e.isPropagationStopped()	是否調用e.stopPropagation()方法
e.stopImmediatePropagation()	取消事件冒泡，并取消事件的后续处理函数 `$('.box').click(function (e) { e.stopImmediatePropagation() //调用取消冒泡， }) $('.box').click(function (e) { alert(123) //并且这里也不会执行 })` </td> </tr> <tr> `<td>e.isImmediatePropagationStopped()</td>` <td>判断是否调用了...方法 </td> </tr> </table> 高級事件模拟点击 `//注意与bind获取额外数据的区别： $('#inp').click(function () { alert(123) }).trigger('click') //.click() 简写 //trigger额外数据只有一条时可省[]，多条不能省略，第二条之后无法识别 $('#inp').click(function (e,data1,data2,data3) { alert(data1+data2+data3[1]) }).trigger('click',['123','abc',['j','k','l']]) $('p').on('click',123, function (e) { console.log(e.data); //123 })` 自定义事义事件，主要给trigger使用，本身自已无法执行 `$('#inp').bind('mye', function () { alert('自定义可件') }).trigger('mye')` triggerHandler() 相比 trigger; 有四點不同 1、触发事件但不会执行事件的默认行为；即相当于模拟： `$('form').submit(function (e) { e.preventDefault() }).trigger('submit')` 2、如是$('多个input').只会执行匹配到的第一个，而trigger会执行所有匹配到的 3、返加值，trigger为jq对象，所以可以连写 `alert($('#inp').bind('mye', function () { alert('自定义可件') }).trigger('mye')).css('color','red')` 而triggerHandler返回值为return值或undefined; 所以无法连写 4、trigger会冒泡，triggerHandler不冒泡 `$('input').bind('click.a', function () { alert('abc') }) $('input').bind('click.x', function () { alert('xyz') }) $('input').bind('mouseover.a', function () { alert('abc') }) $('input').unbind('.a') //即可移除click.a mouseover.a //当然，对于trigger,trigger('.a')也一样执行两个` 事件委託 live()，可以动态绑定，因为live事件是document事件；而点击btn其它是冒泡到document上，并且点击document时需要验证e.type e.target才能触发；（1.4.3jq已淘汰：冒泡传得太长，且不支持连写调用） `$('.btn').live('click', function () { $(this).clone().appendTo('#b') }) //相对的,取消为 $('.btn').die('click')` live的替换方法'父元素'.delegate(‘动作’，‘点击元素’,函数) ; 1.7版本已淘汰，整合到on `$('#b').delegate('click', '.btn',function () { $(this).clone().appendTo('#b') }) //相对的,取消为 $('.btn').undelegate('click')` 推荐使用整合：on('动作','点击元素',function) `$('#b').on('click.a','.btn', function () { $(this).clone().appendTo('#b') }) $('#b').off('click.a') //one只執行一次即取消 $('#b').one('click.a','.btn', function () { $(this).clone().appendTo('#b') })` jq中返回的this是原生的，所以可以這麼寫 `var _box = $('.box') _box.click(function(){ alert(this.innerHTML); })` `//alert($('input').val()); //获取 //$('input').val('7777'); //针对多个input的value值进行设置 alert($('input').val()); // 针对集合进行获取操作，只获取第一个` [=] ¹ [$=] [=] `$('li').slice(1,4).css('background','red') //選中的是2，3，4；slice(1,2)什麼都選不中，slice(1,2),選中的是2` closest()：找指定的一个最近的祖先元素（包括自身）（该函数必须加参数）；它只能选择到一个唯一的元素 `// 【指定的节点 == 前面部份 $('ul') 元素 == 被操作部分】 //append()：把元素添加到指定的节点的里面的最后 var $li = $('<li>hello</li>'); // $('ul').append($li); //prepend()：把元素添加到指定的节点的里面的最前面 // $('ul').prepend($li); //before()：把元素添加到指定的节点的前面 // $('ul').before($li); //after()：把元素添加到指定的节点的后面 $('ul').after($li);` appendTo()、prependTo()、insertBefore()、insertAfter()，指定節點與被操作部分對換，即指定要操作的節點放前，目標節點放後； index()：索引值，代表的就是当前元素在所有兄弟节点中排第几。如果不添加参数，索引值与标签类型是无关的。 = ↩ 零JQ筆記 \| 備忘 5-10 March 2, 2013 全选：当点击或勾选全部时，列表包括本身复选框选中；全不选：当点击不选时，包括不选框、全选框都为未选中；反选：注意全选框状态，需要each()所有，每个都设置一次； allchk()检测全选框选中状态还是未选中，先算checkbox个数，each每个框，如果true则临时变量+1，最后，临时变量==checkbox个数，证明为全选，！=证明全选框应为未选中状态； attr可能返回disabled 或 disabled = 'disabled' * prop()只返回标准的true false * 1/只添加属性名称即生效应该使用prop() * 2/只存在true/flase应该使用prop() * 所以操作checkbox 的状态时建议全部使用prop() <pre>//全选 $('#CheckedAll').click(function () { if (this.checked) { $('[name=items]:checkbox').prop('checked', true) } else { $('[name=items]:checkbox').prop('checked', false) } allchk() //设置全选框状态 }) //全不选 $('#CheckedNo').click(function () { $('[name=items]:checkbox,#CheckedAll').prop('checked', false) allchk() }) //反选 $('#CheckedRev').click(function () { $('[name=items]:checkbox').each(function () { $(this).prop('checked', !$(this).prop('checked')) //this.checked = !this.checked }) allchk() }) $('[name=items]:checkbox').click(function () { allchk() }) $('#print').click(function () { var arrv = [ ] $('[name=items]:checkbox:checked').each(function (i) { arrv[i] = $(this).val() //arrv.push( $(this).val()) }) }) //检测及设置全选框是否选中 function allchk() { var _chkn = $('[name=items]:checkbox').size() var _chk = 0 $('[name=items]:checkbox').each(function () { if ($(this).prop('checked')) { _chk++ } }) if (_chkn == _chk) { //全选 $('#CheckedAll').prop('checked', true) } else {//不全选 $('#CheckedAll').prop('checked', false) } See the Pen jbyXro by elmok (@elmok) on CodePen. <script async src="//assets.codepen.io/assets/embed/ei.js"></script> select multiple 事件，$('select:first-child option:selected') 获取被选中，然后使用appendTo【剪切】添加；使用dblclick()双击事件，重点：获取当前选项：$('option:selected',this); $('') 完整=== $('',document),后面是作用域； console.log($('select:first-child option:eq(2)').val());获取第2个值 console.log($('select:first-child option:eq(2)').text());获取第2个text值 <select name="" id="" multiple="multiple"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> </select> <select name="" id="" multiple="multiple"></select> <div class="add">选中添加到左边</div> <div class="addall">全部添加到右边</div> <script src="jquery-1.11.1.js"></script> <script> $('.add').click(function () { var _options = $('select:first-child option:selected') _options.appendTo('select:nth-of-type(2)') }) $('.addall').click(function () { var _options = $('select:first-child option') _options.appendTo('select:nth-of-type(2)') }) //绑定事件，通过$('option:selected',this) 方法获取被选中选项， $('select:first-child').dblclick(function () { var _options = $('option:selected', this) _options.appendTo('select:nth-of-type(2)') }) </script> 1、先添加提示内容； 2、文本框失去焦点后处理； 3、由于每次失去焦点后都会创建一个新元素，所以创建之前先删除以前的 remove(); 4、在提交表单之前，需要对表单整体进行一次验证，使用trigger()触发blur; 5、即时提醒，表单元素绑定keyup和focus事件; 6、trigger('blur')不仅会触发元素绑定的blur事件，也会触发默认，所以使用triggerHandler('blur')，不触发默认事件 See the Pen meRvbv by elmok (@elmok) on CodePen. <script async src="//assets.codepen.io/assets/embed/ei.js"></script> 100%死记硬背：对于高版本jq.1.7+ checked, selected 这些属性要用 prop()来操作例如單選radio控制表格單高亮，当前tr加click,$(this).addClass('on').【兄弟去掉】.siblings().removeClass('on').【返回tr $(this)】.end().【找radio】.find(':radio').【加属性】.prop('checked',true) ，使用attr会出错 <style> table{border-collapse: collapse} td{border:1px solid #cccccc; padding: 5px 20px;} .on{ background: #f1f1f1;} </style> <table> <tbody> <tr> <td><input type="radio" name="item" id=""/></td> <td>a</td> <td>a</td> <td>a</td> </tr> <tr> <td><input type="radio" name="item" id=""/></td> <td>a</td> <td>a</td> <td>a</td> </tr> </tbody> </table> <script src="jquery-1.11.1.js"></script> <script> $('table tr').click(function () { $(this).addClass('on') .siblings().removeClass('on') .end().find(':radio').prop('checked',true) }) </script> //当然也可以使用 $('table :radio:checked').parent().parent().addClass('on') $('table :radio:checked').parents('tr').addClass('om') $('tbody>tr:has(:checked)').addClass('on') 表格多行高亮： $('table tr').click(function () { if ($('table tr').hasClass('on')) { $(this).removeClass('on').find(':checkbox').prop('checked', false) } else { $(this).addClass('on').find(':checkbox').prop('checked', true) } //當然，更高級點的寫法 $('table tr').click(function () { var hasCheck = $(this).hasClass('on') $(this) [hasCheck ? 'removeClass' : 'addClass']('on').find(':checkbox').prop('checked', !hasCheck) }) 表格收縮 <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>李四</td><td>女</td><td>浙江杭州</td></tr> $('table tr.parent').click(function () { $(this).toggleClass('on') .siblings('.child_'+this.id).slideToggle('slow') }) « Previous 1 ... 49 50 51 52 53 54 Next » 最新文章此内容被密码保护 openwrt 单网口设置旁路由模式此内容被密码保护此内容被密码保护此内容被密码保护此内容被密码保护想起一个网站 openVPN共享访问一些方法记录使用过的Excel公式记录最近回复分类 JS (61) CSS (12) HTML (2) 二維 (5) 伺服器 (1) 去芫存菁 (0) 小記 (5) JQ (8) 音樂 (3) 框架入門 (5) 0m (4) 生活 (2) 备忘 (1) 归档 February 2026 November 2021 October 2021 September 2021 June 2021 November 2020 May 2018 April 2014 March 2014 February 2014 January 2014 December 2013 November 2013 October 2013 September 2013 August 2013 July 2013 May 2013 March 2013 November 2012 April 2012 其它登录文章 RSS 评论 RSS Typecho © 2026 J.chongj.chong@qq.com 模板由cho制作.

J.chong

零JQ筆記 | 記憶點一

零JQ筆記 | 備忘 5-10

最新文章

最近回复

分类

归档

其它