jquery基础笔记

 : jank    :   : 492    : 2016-09-19 19:59  js

一、jquery基础

    1.jq语法选择器

$(this).hide()             //隐藏当前元素

$("p").hide()    //隐藏所有 <p> 元素

$("p.test").hide()          //隐藏所有 class="test" 的 <p> 元素

$("#test").hide()           //隐藏所有 id="test" 的元素

$("*")                  //选取所有

$(this)                  //选取当前 HTML 元素

$("p.intro")            //选取 class 为 intro 的 <p> 元素

$("p:first")            //选取第一个 <p> 元素

$("ul li:first"          //选取第一个 <ul> 元素的第一个 <li> 元素

$("ul li:first-child")      //选取每个 <ul> 元素的第一个 <li> 元素

$("[href]")            //选取带有 href 属性的元素

$("a[target='_blank']")   //选取所有 target 属性值等于 "_blank" 的 <a> 元素

$("a[target!='_blank']"   //选取所有 target 属性值不等于 "_blank" 的 <a> 元素

$(":button")     //选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")            //选取偶数位置的 <tr> 元素

$("tr:odd")           //选取奇数位置的 <tr> 元素

2.文档就绪事件

$(document).ready(function(){

   // 开始写 jQuery 代码...

});

//也可以简写成

$(function(){

// 开始写 jQuery 代码...

});

3.jq事件

$('#button').click(function(){});           //单击事件

$('#button').dblclick(function(){});        //双击事件


$('aa').mouseenter(function(){});         //鼠标进入事件

$('aa').mouseleave(function(){});         //鼠标离开事件

$('aa').mousedown(function(){});         //鼠标在当前按下触发

$('aa').mouseup(function(){});          //鼠标松开触发


$('#b').focus(function(){});           //input表单获得焦点事件

$('#b').blur(function(){});           //input表单失去焦点事件


二、jquery效果

1.隐藏/显示

$('#h').hide()   //隐藏

$('#h').hide(1000)                 //隐藏速度,也可以是slow/fast


$('#s').show()                   //显示

$('#s').show(1000)                //显示速度


$('#t').toggle()                  //隐藏/显示自动切换

$('#t').toggle(2000)               //隐藏/显示自动切换速度

2.淡入/淡出

$('.d').fadeIn()                  //淡入

$('.d').fadeIn(1000)               //淡入,速度


$('.d').fadeOut()                //淡出

$('.d').fadeOut(1000)              //淡出,速度


$('.d').fadeToggle()               //淡入、淡出自动切换

$('.d').fadeToggle(1000)            //淡入、淡出自动切换,速度


$('.ds').fadeTo(1000, 0.5)          //点击颜色变淡(0 ~ 1), 速度

3.滑动

$('#h').slideDown()               //向下滑动

$('#h').slideDown(1000)            //向下滑动,速度


$('#h').slideUp()                //向上滑动

$('#h').slideUp(1000)             //向上滑动,速度


$('#h').slideToggle()             //上下滑动,自动切换

$('#h').slideToggle(1000)          //上下滑动,自动切换,速度

4.动画

   1. animate操作多个属性

   $("button").click(function(){

$("div").animate({

   left:'250px',   //向右滑动

   opacity:'0.5',  //颜色变淡

   height:'150px',  //高度变

   width:'150px'   //宽度变

});

}); 

2. animate使用相对值

$("button").click(function(){

   $("div").animate({

   left:'250px',

   height:'+=150px',   //高增加

   width:'+=150px'    //宽增加

   });

}); 

3. animate使用预定义的值

$("button").click(function(){

   $("div").animate({

    height:'toggle'       //隐藏、显示自动切换

   });

}); 

4. animate使用队列功能,即顺序执行多个动画效果

$("button").click(function(){

var div=$("div");

div.animate({height:'300px',opacity:'0.4'},"slow");

div.animate({width:'300px',opacity:'0.8'},"slow");

div.animate({height:'100px',opacity:'0.4'},"slow");

div.animate({width:'100px',opacity:'0.8'},"slow");

}); 

5. 停止动画

$("#panel").stop();


三、jquery html

    1.dom操作

    1. 获取内容

    $('p').html();       //获取所属元素的内容并包括html标签

    $('p').html('<b>hello</hello>')         //设置新值

    $('p').html(function(){        //回调函数,直接返回结果

    return '<b>hello jank</b>'

    })


    $('p').text();            //获取所属元素的内容

    $('p').text('hello')                   

    $('p').text(function(origText){  //origText,获取原来text/html/val

    return origText + 'jank'

    })


    $('input').val();        //获取表单中输入的值

            $('input').val('hello')                 

            $('input').val(function(){

            return 'jank'

            })

    2. 获取属性

    $('#jank').attr('href');     //获取href的属性值

    $('#jank').attr('href','http://i.jankl.com')

    $('#jank').attr(function(origValue){  //原来的属性值

    return origValue + '/blog'

    })

    如:

    <html>

    <body>

      <a href="www.jankl.com" id="jank">liberalist的网站</a>

        <button>获取</button>

      </body>

    </html>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>

       $('button').click(function(){

    var jank = $('#jank').attr("href")

    alert(jank)

       })

         </script>

    3.jquery添加元素

    $('#jank').append('i love you');

    $('#jank').prepend('ai'); 

    $('#jank').after('i love you');

    $('#jank').after('ai');

    4.jquery删除元素

    $('#jank').remove();             //删除选中的元素

    $('#jank').empty();             //删除被选中元素的子元素

    5.jquery操作css

    $('#jank').addClass();          //添加css样式

    $('#jank').removeClass();         //删除css样式

    $('#jank').toggleClass();        //添加、删除css样式自动切换


    $('#jank').css('background-color', 'blue');     //设置css样式

    6.jquery尺寸

       $('#jank').width()              //获取宽度,

       $('#jank').width('100px')         //设置值

$('#jank').height()                             

$('#jank').innerWidth()

$('#jank').innerHeight()

$('#jank').outerWidth()

$('#jank').outerHeight()

四、遍历值

1.祖先

$('#jank').parent()            //返回直接父元素

$('#jank').parent()           //返回所有祖先元素

$('#jank').parentsUntil()        //返回两层祖先元素

2.后代

$('#jank').children();          //返回直接的儿子元素,一层

$('#jank').find('span');        //返回jank下的全部span元素

$('#jank').find('*');          //返回jank下的全部元素

3.同胞

$('#a').siblings()          //返回被选元素的所有同胞元素。

$('#a').next()             //返回被选元素的下一个元素

$("#a").nextAll()          //返回被选元素后的所有同胞元素

$('#a').nextUntil()         //返回两个被选元素后的同胞元素

$('#a').prev()            //返回被选元素的前一个元素,下面类似

$('#a').prevAll()                             

$("#a").prevUntil()

4.过滤

$('p').first()            //取第一个p标签

$('p').last()            //取最后一个p标签

$('p').eq(2)             //取第二个p标签

$('p').not('#jank')         //id为jank的除外

$('p').filter('.url')       //涵盖ur


   

备案编号:赣ICP备15011386号

联系方式:qq:1150662577    邮箱:1150662577@qq.com