零JQ筆記 | 記憶點一

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'))

選擇器

$('.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操作

$('#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'
})

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)

表單

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

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

基础事件

$('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不支持，一般用于清理工作；

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

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

//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;
  }
})

事件對像

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>

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

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

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

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

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

<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>

$('.box').click(function (e) {
    e.stopImmediatePropagation()  //调用取消冒泡，
})
$('.box').click(function (e) {
alert(123)                        //并且这里也不会执行
})

<td>e.isImmediatePropagationStopped()</td>

//注意与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
})

$('#inp').bind('mye', function () {
    alert('自定义可件')
}).trigger('mye')

$('form').submit(function (e) {
    e.preventDefault()
}).trigger('submit')

alert($('#inp').bind('mye', function () {
    alert('自定义可件')
}).trigger('mye')).css('color','red')

$('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')也一样执行两个

$('.btn').live('click', function () {
    $(this).clone().appendTo('#b')
})

//相对的,取消为
$('.btn').die('click')

$('#b').delegate('click', '.btn',function () {
    $(this).clone().appendTo('#b')
})
//相对的,取消为
$('.btn').undelegate('click')

$('#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')
})

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

// 【指定的节点 == 前面部份 $('ul')  元素 == 被操作部分】

//append()：把元素添加到指定的节点的里面的最后
var $li = $('<li>hello</li>');
// $('ul').append($li);

//prepend()：把元素添加到指定的节点的里面的最前面  
// $('ul').prepend($li);

//before()：把元素添加到指定的节点的前面
// $('ul').before($li);

//after()：把元素添加到指定的节点的后面
$('ul').after($li);