欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript(12):jQuery(1)

程序员文章站 2022-07-13 12:35:19
...

    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>