jQuery 学习笔记(一)

jQuery 简介:

一个非常优秀的js库

8~9千行的代码,重在封装思想,使用方法会用就可以,现查现用.

zepto 从jQuery演变而来

jQuery 1.8 以前的版本是兼容 IE 6 的  之后为了摆脱庞大的体积舍弃了 IE 6 的兼容代码,所以遇到那啥单位的项目就用1.8版本以前的jQuery

jQuery使用示例:

 $(function(){
            $('div').css({width:'100px',height:'100px',color:'red',background:'black'});
        })

结果:

对比原生JS:

    var aDiv = document.getElementsByTagName('div');
            for(var i =0 ;i<aDiv.length;i++){
                aDiv[i].style.width ='100px';
                aDiv[i].style.height ='100px';
                aDiv[i].style.color='red';
                aDiv[i].style.background='black';
            }
    

很多行代码才能达到同样的效果

zepto是针对移动端的js库

jQuery学习注意点:

jQuery只是辅助工具,不能替代js,方法再全也有缺失.

jQuery需要分阶段学习,jQuery很庞杂,应由浅入深.

jQuery应用方法很多,多到令人发指,学习时,应该把常用方法运用熟练,对于一些不常用的方法,我们常常先了解其用途,现查先用API

Jquery的选择器  标签选择器:$('div'),

                           clss选择器: $('.demo'),

                           Id选择器 : $('#mDiv')

                           父子选择器(直接子标签): $('#demo>p') //id为demo下的直接p标签

Jquery的 $('')中还可以放入其他类型 

js原生dom  例如:     var mDom = document.getElementById('demo');

                                $(mDom) //会生成jQuery对象

对比一下原生Dom的对象,和jQuery对象

Jquery: 原型上的可用方法相当丰富,这里就不一一列举了

$()除了可以填原生dom外,还可以填jQuery对象例如: 

                                $($('.demo'))//依然返回该元素的jQuery对象

$() 中还可以添加null  与 undefined结果如下:返回的对象中没有元素

    $() 中还可以添加函数  例如 $(function(){console.log("456")})//作用是立即执行函数

$() 还有输入两个参数的用法: 

$('p','#demo') 返回 id为demo下的 p元素

$ 等同于 jquuery 也可以写成 jquery('.demo');

也就是说 $ 是一个函数类似

function $ (){ 省略.....}

函数中针对各种参数的类型又进行了分类的处理

sizzle 是 jquery 模块中 负责查找 元素的模块,使用正则表达式

如果只是希望用 查找元素的方法,可以下载 sizzle .js 只包含jQuery中查找元素的方法

上面提到的用法都是比较常规的用法,下面进入难度模式:

1.  $('ul>li:first');//ul下直接子元素的第一个  或者 最后一个:$('ul>li:last');

    当然还有索引的方式: $('ul>li:eq(3)') 

2. $('ul>li:even').css('color','red'); 偶数的  和  $('ul>li:odd').css('color','red');  奇数的

filter ( ) 方法 对  $() 选到的对象进行筛选 例如 $('li').filter(',demo').css('color','red');

filter( ) 函数中还可以再添加函数 ,会对$('li') 选中的对象进行便利 并进行处理,返回true则当前项是符合条件的

$('li').filter(funcation(item){   //item 会被填充进索引
console.log(item)
return true;

}).css('color','red')

效果如图:全部都满足,

 

非常好的方法可以定义对元素进行筛选

not( ) 方法 和  filter 正好相反  

$('li').not(function(index){return false}).css('color','red'); //返回true 则被截取, 返回true 被保留 //这里是全部保留

has() 函数  :用法:  li中含有p标签的是匹配项: 如下

 $('ul>li').has('p').css({listStyle : 'none',color : 'red'})   //这里找到的是li标签

find( ) 函数 :用法 与has() 的不同点是  has 仅作为判断条件, find () 会返回找到的元素,

  $('ul>li').find('p').css({listStyle : 'none',color : 'red'})  //这里找到的对象是 p标签
           

eq() 函数 : 不仅在 $('div:eq(2)') 中可以使用eq查找索引对应的项,还可以单独的使用eq方法

 $('ul>li:eq(1)').css({listStyle : 'none',color : 'red'})
 $('ul>li').eq(4).css({color : 'green',listStyle : 'none'});

同样的规则下  odd/even 奇数/偶数 在外部不具备类似 eq() 的 方法.

 

is( ) 函数 : 用法:判断元素是否合条件

  <div class="wrap">
           <ul>
            <li>123</li>
            <li class="demo">456</li>
            <li>789<p>呵呵哒</p></li>
            <li>741</li>
            <li>852</li>
        </ul>
    </div>
    <script>
       var res  = $('ul>li:eq(1)').css({listStyle : 'none',color : 'red'}).is('.demo');
       console.log(res);
       </script>

结果 : true

css() 函数 :两种用法:

$('li').css('width','100px');一个属性的写法;

$('li').css({width : '100px',height : '100px',color : 'red'})//多个属性

htnl() 函数与 text() 函数,不传参数就是获取对象的 html 和 text

$('li').html('<span>123</span>');会识别内容中的html标签

$('li').text('<span>123</span>');不会识别内容中的html标签

结果如下:

结果二

链式调用

Jquery中 类似:

$( 'li'). css({ color : 'red', width : '100px', height : '100px'}). html( '<span>789<span>')

被称之为链式调用,能这样运用方法的前提是每个方法的返回值都是 调用它的对象

但是需要特别注意的是上面的方法都是赋值操作,遇到取值操作时,就行不通了

例如 :

console. log( $( 'li'). css({ color : 'red', width : '100px', height : '100px'}). css( 'color'))

返回值如下:

attr() 函数 与prop()函数

attr() 函数主要是依赖的是Element对象的getAttribute() 和setAttribute()

prop() 函数主要依赖于js中原生对象属性获取和设置

因为 jQuery 认为: attribute 的checked ,selected, disabled 就是表示该属性初始状态的值

property 的checked ,selected , disabled 才表示该属性实时状态的值(值为true,或false)

原生设置属性:

   <div class="wrap">
           <ul>
            <li>123</li>
            <li class="demo">456</li>
            <li>789</li>
            <li>741</li>
            <li>852</li>
        </ul>
    </div>
    <script>
        var demo =document.getElementsByClassName('demo')[0];
        demo.className ="test"
        demo.sister ="litter baby"
        demo.setAttribute('brother','HellowKity')
    </script>

结果:设置class名成功了,但是自定义属性 sister 没有添加成功

自定义属性就可以使用 setAttribute来添加如上图的 brother 属性

看完了这些我们在转过头来看 attr和 prop

    <div class="wrap">
           <ul>
            <li>123</li>
            <li class="demo">456</li>
            <li>789</li>
            <li class="item">741</li>
            <li>852</li>
        </ul>
    </div>
    <script>
        $('.demo').prop('sister','little boby')
        console.log($('.demo').prop('sister'))
        $('.demo').prop('class','test')

       
        $('.item').attr('brother','HellowKity')
        console.log($('.item').attr('brother'))
        $('.item').attr('class','test');
        
    </script>

结果:可以发现prop设置自定义属性是无效的,而attr设置属性是有效的

结果如下:

发现 prop没有成功设置属性但是在获取值得时候却获取到值了,一脸懵逼,

checkbox 

再来看看 对于固有属性例如 input type=checkbox  中如下:

 <input class="check" type="checkbox" checked>
    </div>
    <script>
    console.log('attr:'+ $('.check').attr('checked'));
    console.log('prop:'+ $('.check').prop('checked'));
    </script>

显示:

结果:

现在设置为未选中状态再执行一遍:

显示:

结果:

发现无论是选中还是未选中attr返回的都是 checked 

而且在 input 中去掉 checked 属性   attr  返回的是  undefined

所以这里 prop 针对的是 状态    无论有没有checked  他返回的是是否选中 true /false

而 attr 只会  在主动写上checked时 返回 checked 没有时返回 undefined

*注意 checked 这个属性比较特殊 一旦加上不用再 checked =""  因为本生就是选中不用复值

select 

 <select name="language" id="language">
            <option value="123">javascript</option>
            <option value="456">Java</option>
            <option value="789">C#</option>
        </select>
    <script>
    console.log('attr:'+ $('option:last').attr('selected'));
    console.log('prop:'+ $('option:last').prop('selected'));
    </script>

显示:

结果:

现在给最后一个option 设置 selected 

< option value= "789" selected >C# </ option >

显示:

结果:

input 的disabled

 <input type="text" disabled>
    <script>
    console.log('attr:'+ $('input').attr('disabled'));
    console.log('prop:'+ $('input').prop('disabled'));
    </script>

返回结果:

去掉后:

  所以在获取 selected  disabled  checked 时 用prop    返回   true/false 是比较好的

另外当移除 属性时 就可以用到  removeAttr(  )  和  removeProp()

prev() 函数  获取上一个兄弟节点

$("p").prev(".selected")  //返回上一个select 类型的兄弟节点

next() 函数 获取下一个兄弟节点

$("p").next(".selected").css("background", "yellow"); //获取下一个class名为selected 的兄弟节点并设置样式

index() 在当前兄弟节点中的索引值

$("li").click(function(){
  alert($(this).index());
});

应用:轮播图按钮

< ul >

< li ></ li >

< li ></ li >

< li ></ li >

< li ></ li >

< li ></ li >

</ ul >

< script >

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

$( 'li'). css( 'background', 'black');

$( this). css( 'background', 'red');

console. log( '第'+ $( this). index()+ '张牌'); //以索引值找到指定的图片

})

< / script >

显示:

接着上面的轮播图按钮的例子再说一下 

addClass()  添加 class名  removeClass() 移除class名

// addClass的使用示例
$("button").click(function(){
  $("p:first").addClass("intro");
});

//removeClass 的使用示例    空参数代表删除所有class
$("button").click(function(){
  $("p:first").removeClass("intro");
});

利用这两种方法重写轮播图按钮:

< style >

li{

display: inline-block;

width : 30px;

height : 30px;

border-radius: 50%;

background: black

}

.demo{

background : red;

}

< / style >

< ul >

< li class= "demo" ></ li >

< li ></ li >

< li ></ li >

< li ></ li >

< li ></ li >

</ ul >

< script >

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

$( '.demo'). removeClass( 'demo');

$( this). addClass( 'demo');

console. log( '第'+ $( this). index()+ '张牌'); //以索引值找到指定的图片

})

< / script >

结果: 一样,而且性能更好,不用去操作所有项,直接用 class选择器选出来 修改对应项