jQuery

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

  • li
  • li
  • li
  • li
<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();
});

18.主动触发trigger()

jQuery
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。