jQuery - 前端笔记 JSRUN

1.属性选择

1）[] 有该属性的执行

2）[=] 属性等于自定义值执行

3）[^=] 属性起始位置有自定义值执行

4）[$=] 属性结束位置有自定义值执行

5）[*=] 属性有自定义内容执行

<input type="text">
<input type="text" value="3">
<input type="text" value="333">
<input type="text" value="123_444">
<input type="text" value="123_555">
<input type="text" value="777_888">

// input有value背景色红色
$('input[value]').css('background','red');

// input有value的值等于3背景色为绿色
$('input[value=3]').css('background','green');

// input有value的值开头等于123背景色为黑色
$('input[value^=123]').css('background','black');

// input有value的值结束等于888背景色为蓝色
$('input[value$=888]').css('background','blue');

// input有value的值包含5背景色为黄色
$('input[value*=5]').css('background','yellow');

2.引号的问题

获取属性值两个，中间有空格，一定加引号

<div class="div1 div2">获取属性值两个，中间有空格，一定加引号哦</div>
$('div[class="div1 div2"]').css('color','pink');

3.命名小规范

// 未避免一个页面代码过多，导致是否分辨js获取，还是jq获取所以jq获取多以在前面加个$进行区分
var oDiv = document.getElementById('#div1');
var $div = $('#div1');

4.$()容错处理

页面是没有span1的
var oSpan = document.getElementById('#span1');
oSpan.innerHTML = '会报错';

var $Span = $('#span1');
$Span.html('不会报错');

*利用length判断元素是否存在
jq的容错处理，如果没有元素而不会报错很脑袋疼，如果出现问题，可以通过length属性排查
console.log($Span.length);
如果为0就证明该元素未存在

5.show()/hide()

建议不要使用css，dispaly属性设置，如果是行内元素，会发生样式变化

span1 span1 span1

<input class="btn" type="button" value="按钮"><br>
<span class="span1">span1</span>
<span class="span1">span1</span>
<span class="span1">span1</span>

var onOff = true;
$('.btn').click(function(){
    if(onOff){
        $('.span1').css('display','none');
    }
    else{
        $('.span1').css('display','block');
    }
    onOff = !onOff;
});

6.获取兄弟节点siblings();

div

em span

<div class="div2">
    <div>div</div>
    <em>em</em>
    <span>span</span>
</div>

$('.div2 em').siblings().css('background','red');

参数筛选功能

div

em span

<div class="div3">
    <div>div</div>
    <em>em</em>
    <span>span</span>
</div>
$('.div3 em').siblings('span').css('background','green');

7.下标eq（）

<ul class="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

$('.ul1 li').eq(2).css('background','red');

8.节点选择closest()

找指定一个最近的祖先元素（包括自身），必须要接收一个参数（只能选择唯一的元素）点击span让父级li变成粉色（parents的话会让父级的li也会跟着变色）

父级li
- 子集lispan
- 子集lispan
- 子集lispan
- 子集lispan
父级li
- 子集lispan
- 子集lispan
- 子集lispan
- 子集lispan

<ul>
    <li>父级li
        <ul class="ul1">
            <li>子集li<span>span</span></li>
            <li>子集li<span>span</span></li>
            <li>子集li<span>span</span></li>
            <li>子集li<span>span</span></li>
        </ul>
    </li>
    <li>父级li
        <ul class="ul1">
            <li>子集li<span>span</span></li>
            <li>子集li<span>span</span></li>
            <li>子集li<span>span</span></li>
            <li>子集li<span>span</span></li>
        </ul>
    </li>
</ul>

$('.ul2 span').click(function(){
    // $(this).parents('li').css('background', 'pink');
    $(this).closest('li').css('background', 'pink');
});

9.添加节点

append()    把元素添加到指定节点的里面的最后
prepend()    把元素添加到指定节点的里面的最前面
before()    把元素添加到指定节点的前面
after()    把元素添加到指定节点的后面
10.clone(),克隆

// 如果克隆行为的话，要在clone里添加true即可clone(true);
<span class="spana">spana</span>
<div class="diva">diva</div>

var $spana = $('.spana').clone();
$('.diva').append($spana);

10.索引值index();

参数可以进行筛选操作

<div>div1<span>span1</span></div>
<div>div2<span class="index">span2</span></div>
<div>div3<span>span3</span></div>

alert( $('.index').index('div span') );
弹出1

11.遍历each（循环）

让li的内容部等于0,1,2

// i相当于索引
// elem 相当于元素
$('.ul11 li').each(function(i,elem){
    $(elem).html(i);
    // 也可以$(this).html(i);
    /*
    跳出
    if(i==1){
        return false;
    }
    */
});

11.包装对象

wrap();包装
wrapAll();整体包装
wrapInner();内部包装
unwrap();删除包装（删除父级节点，不能删除body）

<span></span>
<span></span>

// 外面就包装了一个div
$('span').wrap('<div>');
会变成这个样子
<div><span></span></div>
<div><span></span></div>

// 整体包装
$('span').wrapAll('<div>');
会变成这个样子
<div><span></span><span></span></div>
但是不常用，如果这样的结构，会改变html布局，所以不常用
<span></span>
<p></p>
<span></span>
$('span').wrapAll('<div>');
会变成
<div><span></span><span></span></div>
<p></p>

// 内部包装
$('span').wrapInner('<div>');
会变成这个样子
<span><div></div></span>
<span><div></div></span>

// 删除父节点
<span><div></div></span>
<span><div></div></span>

$('div').unwrap('<span>');
会变成这个样子
<span></span>
<span><</span>

12.jQ转原声JS

get();把JQ转成原声js，默认情况获取的是一个原声的集合，那么可以通过参数可以找到集合中的指定向

<div>cc</div>

alert( $('div').get(0).innerHTML );

13.元素的尺寸

宽	高
width()	height()
innerWidth()	innerHeight()
outerWidth()	outerHeight()
outerWidth(true)	outerHeight(true)

width();//width innerWidth();//width+padding outerWidth();//width+padding+border outerWidth(true);//width+padding+border+margin

14.滚动距离

scrollTop();scrollLeft();

打开页面点击显示在300的位置
$(document).click(function(){
    $(document).scrollTop(300);
});

15.元素距离

alert( $('.#div1').offset().top );距离值是相对于整个页面的
alert( $('.#div1').offset().left );
alert( $('.#div').position().top );会找到父级的绝对定位，但是不认margin值，可以在自己本身设置left值
利用计算原理，得到相应值
offsetParent()获取有定位的祖先节点
alert( $('#div2').offset().left - $('#div2').offsetParent().offsetParent().offset().left )
找到div的左距离减去，父级到document的做距离

16.window和document区别

$(window)指的是当屏的可视区域
$(dccument)指的是整个文档的区域

17.ev

$('.div1').click(function(ev){
    alert( ev.pageY );鼠标的坐标：相对于整个页面的
    alert( ev.clientY );鼠标的坐标：针对于可视区的
});

$('.div1').keudown(function(ev){
    alert( ev.whitch );键盘键值
});

$(document).click(function(ev){
    ev.target;事件源
    alert( ev.target );// 弹出来的就不是document
});

17.ev事件委托

$('ul').delegate('li','click',function(){
    $(this).css('background','red');
});

var $li = $('<li>li</li>')
$('.btn').click(function(){
    $('ul').append($li);
});

//////////////////////////////////
$('ul').delegate('li','click',function(ev){
    $(ev.dalegateTarget).css('background','red');
    相当于下面的
    $('ul').css('background','red');
});

/* 取消委托 */
$('ul').delegate('li','click',function(ev){
    $(ev.dalegateTarget).undelegate();
});