JavaScript（12）：jQuery（1）

    1.jQuery中文文档网址

    http://jquery.cuishifeng.cn/

    2.jQuery选择器（$符号相当于jquery）

    (1)id选择器          $('#id')

    (2)class选择器        $(".classname")

    (3)标签选择器            $('tagname')

    (4)组合选择器

<div id="i1"></div>
<a></a>
<div>
    <span class="c2"></span>
</div>
<script>
    var tag=$("a,.c2,#i10")        //获取所有a标签、所有类名为'c2'的标签、id为'i1'的标签
</script>

    (5)层级选择器

$('#i1 a');        //获取id='i1'标签下的子子孙孙标签中所有的<a>标签
$('#i1>a');        //只获取id='i1'标签下的子标签中所有的<a>标签

    (6)基本筛选器

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script>
    $('li:first');    //获取所有<li>标签中的第一个<li>标签
    $('li:last');    //获取所有<li>标签中的最后一个<li>标签
    $('li:eq(3)');    //获取所有<li>标签中的索引为3的<li>标签（从0开始数）
</script>

    (7)属性选择器

<div class="text"></div>
<input type="text" />
<input type="text" /> 
<input type="button" />
<script>
    $('[type]');        //获取所有拥有type属性的标签
    $('input[type="button"]');        //获取所有<input>标签中type属性值为'button'的标签
</script>

    (8)表单选择器

$(':text');        //获取所有文本类标签
$(':chexbox');     //获取所有复选框

    3.对于复选框的jQuery操作

$('#tb:checkbox').prop('checked');        //获取id="tb"标签范围内所有复选框是否被勾选的情况
$('#tb:checkbox').prop('checked',true);    //将对应的复选框全部设置为被勾选    

    4.jQuery循环方式

$('#tb:checkbox').each(function(k){
    //k表示当前索引，该匿名函数中也可以不设置参数
    $('this')    //获取当前循环中的元素
})

    4.三元运算符

var v = x>y?3:4;        //若x>y，则v=3;否则v=4

    5.筛选器

<div>
    <a>asdf</a>
    <a>asafd</a>
    <a>ghkj</a>
    <a id="i1">
        <span>hahahah</span>
    </a>
    <a id="i2">hbb</a>
    <a>ftf</a>
</div>
<script>
    $('#i1').next();        //获取id='i1'的标签的下一个标签
    $('#i1').nextAll();        //获取id='i1'的标签下面的所有兄弟标签
    $('#i1').nextUntil('#i2');        //获取id='i1'的标签下面的所有兄弟标签直到id='i2'的标签处

    $('#i1').prev();        //获取id='i1'的标签的上一个兄弟标签
    $('#i1').prevAll();        //获取id='i1'的标签的上面所有的兄弟标签
    $('#i1').prevUntil('#i2')        //获取id='i1'的标签的上面的所有兄弟标签直到id='i2'的标签处

    $('#i1').parent();        //获取id='i1'的标签的父标签
    $('#i1').parents();        //获取id='i1'的标签的所有父祖辈标签
    $('#i1').parentsUntil('#i3');        //获取id='i1'的标签的所有父祖辈标签直到id='i3'的标签处

    $('#i1').children();        //获取id='i1'的标签的所有子标签
    $('#i1').siblings();        //获取id='i1'的标签的所有兄弟标签

    $("#i1").find('span');        //获取id='i1'的标签范围下的所有<span>标签
    $('li:eq(1)');        //获取所有<li>标签中的索引为1的<li>标签
    $('li').eq(1);        //获取所有<li>标签中的索引为1的<li>标签
    $('li').first();        //获取所有<li>标签中的第一个<li>标签
    $('li').last();        //获取所有<li>标签中的最后一个<li>标签

    $('#i1').hasClass('haha');        //判断id='i1'的标签类的值是否为'haha'。若为，则返回true；否则返回false。
</script>  

    6.文本操作（JS的内容，非jQuery）

$('#i1').text()        //获取id='i1'的标签的文本内容
$('#i1').text('<a>1</a>')    //对相应标签的文本内容进行重置，注意此处设置的‘<a>’与‘</a>’只被当做文本内容进行处理

$('#i1').html()    //虽然它获取的仅是id='i1'的标签的文本内容，但它可以对整个标签进行重置
$('#i1').html('<div>1</div>')    //对相应标签进行整个标签的重置，此处的‘<div>’与‘</div>’被当做标签处理

$('#i4').val()        //获取id='i4'的标签的value值
$('#i4').val('666')        //将id='i4'的标签的value值重置为'666'

$('#i1').index()        //获取id='i1'的标签相对于兄弟标签的索引值

    7.样式操作

$('#i1').addClass('wwww');        //对id='i1'的标签添加'wwww'的类名
$('#i1').removeClass('wwww');        //移除id='i1'的标签中'wwww'的类名
$('#i1').toggleClass('wwww');        //若id='i1'的标签中的类名不存在'wwww'，则添加该类名；若存在，则移除该类名

<script>
$('#i1').click(function(){
//    if($('.c1').hasClass('hide')){
//       $('.c1').removeClass('hide');
//    }else{
//       $('.c1').addClass('hide');
//    }
    $('.c1').toggleClass('hide');    //这一条语句相当于被注释掉的整个if结构的作用
})
</script>

$(s).css('position','relative');
//$(s)：将DOM对象转换为jQuery对象。然后设置相对定位，相对于原本位置的定位
$(s).css('color','red');        //设置字体颜色
$(s).css('fontSize',15+'px');        //设置字体大小
$(s).css('left',10+'px');        //设置离左边为15px
$(s).css('bottom',2+'px');        //设置离下边为2px
$(s).css('opacity',0.7);        //设置内容透明度为0.7

    8.属性操作(多用于设置自定义属性)

$('#i1').attr('id');        //获取id='i1'的标签的id属性
$('#i1').attr('id','reset');        //将id='i1'的标签的id值重置为'reset'
$('#i1').removeAttr('id');        //移除id='i1'的标签的id属性

    9.    文档处理

$('#i1').append('<span>hahha</span>');        //在id='i1'的标签的文本内容末尾追加HTML标记(也可以追加文本内容)        
$('#i1').prepend('<span>hhah</span>')        //在id='i1'的标签的文本内容前面追加HTML标记（也可以追加文本内容）
$('#i1').after(content)        //在相应标签后面追加内容，其内容可以是HTML标记、DOM对象、jQuery对象
$('#i1').before(content)        //用法和after相反

$('#i1').remove();        //移除整个标签
$('#i1').empty();        //对相应标签的文本内容进行清空

var c = $('#i1').clone();        //对相应标签进行复制，并将复制品传递给变量c；

    10.位置获取

$(window).scrollTop();        //获取当前页面窗口滚动轮的位置（单位：px）
$('div').scrollTop();        //获取<div>标签所属窗口滚动轮的位置（亦可进行滚动轮的位置设置）
$(window).scrollTop(256);        //将当前页面窗口滚动轮的位置设置在256px

scrollLeft([val]);        //与scrollTop用法类似，只是scrollTop是针对纵轴滚动条，而scrollLeft是针对横轴滚动条的

$("i1").offset().left;        //获取相应标签在页面中的横轴坐标    
$('i1').offset().right;        //获取相应标签在页面中的纵轴坐标

$('i1').position().left;        //获取相应标签相对于父标签偏移的横轴位置
$('i1').position().right;        //获取相对于父标签偏移的纵轴位置

$('i1').height();        //获取相应标签的高度（含边框）（单位：px）
$('i1').height(20px);        //将相应标签的高度重置为20px
$('i1').innerHeight();        //获取相应标签的内部高度（不含边框）
$('i1').outerHeight();        //参数默认为false，此时相当于height()
$('i1').outerHeight(true);        //将参数设为true时，获取的高度包括外边距

    11.绑定方式

    (1)DOM的绑定方式参见JavaScript笔记（10）；

    (2)jQuery绑定方式

$('.c1').click(function(){        //绑定点击事件
    //函数体
});        

$('.c1').bind('click',function(){        //对相应标签绑定一个事件
    //函数体
});
$('.c1').unbind('click',function(){        //对相应标签解绑一个事件
    //函数体
});

$('.c1').delegate('a','click',function(){        //对相应的<a>标签绑定一个事件
    //函数体
});
$('.c1').undelegate('a','click',function(){        //删除相应的<a>标签绑定的一个事件
    //函数体
});

$('.c1').on('click'.function(){        //对相应标签绑定一个事件
    //函数体
})
$('.c1').off('click',function(){        //删除相应标签的一个事件
    //函数体
})

    12.自执行函数，页面加载完后自动执行

$(function(){    //自执行函数，页面加载完后自动执行，
    //函数体，此处可以内嵌函数
})

//用自执行函数来封装局部变量，避免与其他JS文件冲突
(function(arg){
    var status = 1;    //    封装变量
    arg.extend(...);       //由于实参为jQuery，则该句等价于jQuery.extend(...) 
})(jQuery)    //作为实参被传入函数体中

    13.jQuery的扩展方法

<script>
    $.extend({    //第一种扩展方式
        'chong':function(){
            return 'hengheng';
        }
    });
    var v = $.chong();    //可以直接调用扩展函数
    alert(v)    

    $.fn.extend({    //第二种扩展方式
        'dan':function(){
            return 'haha';
        }
    })
    var v =$('#i1').dan();    //必须以标签为对象使用函数，这也就是两种扩展方式不同的地方。
    alert(v);
</script>

    14.jQuery对象与JS对象之间的转换

jQuery对象[0]    =====>    DOM对象
DOM对象          =====>    $(DOM对象)

    15.返回值决定是否跳转

<a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你</a>
<script src="jquery-1.12.4.js"></script>
<script>
    function ClickOn() {
       alert(123);
       return true;
//     若返回的是真值，则跳转发生；若返回的是假值，则跳转不发生。该情况也适用于form表单提交中。
    }
</script>