1.jQuery基础

选择网页元素

 

模拟CSS选择元素

$('#div1')    //通过id获取元素

$('div')        //通过标签获取元素

$('.box')      //通过class名获取元素

 

独有表达式选择

:first 、:last、:eq()、:even、:odd

 

<ul>

    <li></li>

    <li title="hello"></li>

    <li class="box"></li>

    <li class="box"></li>

    <li class="hello"></li>

</ul>

 

$('li : first').css('background' , 'red');    //第一个变红

$('li : last').css('backgound' , 'red');    //最后一个变红

$('li : eq(2)').css('background' , 'red');    //下标为2的li变红也就是第三个li

$('li : even').css('backgound' , 'red');    //基数行的li显示红色

$('li : odd').css('backgound' , 'red');     //偶数行的li显示红色

 

PS:注意冒号：不能少

 

多种筛选方法

filter：过滤

//$('li.box').css('backgound' , 'red'); 

$('li').filter('.box').css('backgound' , 'red');     //筛选出class为box的li元素

$('li').filter('[title=hello]').css('backgound' , 'red');    //筛选出title=hello的元素

 

 

JQ写法

 

方法函数化

window.onload = function(){};    //原生的写法

$(function(){});    //jQuery的写法

 

innerHTML = 123;

html(123)

 

onclick = function(){};

click(function(){})

function click(){}

原生的写法都可以转换成jQuery的写法

 

举例：

window.onload = function(){

    var oDiv= document.getElementById('div1');

    oDiv.onclick = function(){

        alert( this.innerHTML );

    };

};

改写成jQuery的写法：

$(function(){

    //var oDiv = $('#div1');

    $('#div1').click(function(){

        alert( $(this).html() );

    });

});

在jquery中几乎看不见原生中的等号'='赋值 而是通过传参的方式

原生的方法函数化了

 

$(function(){

    $('#div1').click(function(){

        alert($(this).html());    //js的写法

        alert(this.innerHTML);    //js的写法

        //alert($(this).innerHTML);    //错误的写法

        //alert(this.html());    //错误的写法

    });

});

 

 

链式操作

$(function(){

    /*var oDiv = $('#div1');

    oDiv.html('hello');

    oDiv.css('background' , 'red');

    oDiv.click(function(){

        alert('journey');

    });*/

    

    通过链式方式修改上面的代码：

    $('#div1').html('hello').css('background' , 'red').click(function(){

        alert('journey');

    });

});

 

取值赋值合体

$(function(){

    // oDiv.innerHTML = "hello";    //赋值

    // alert(oDiv.innerHTML);       //取值

    $('div1').html('hello');    //当html后面的()里有参数 就是赋值

    alert($('div1').html());    //当html后面的()里没有参数这个就是取值

    css('width' , '200px');    //赋值

    css('width');    //取值

});

 

 

<ul>

    <li>aaa</li>

    <li>bbb</li>

    <li>ccc </li>

    <li>ddd</li>

</ul>

$(function(){

    alert($('li').html());    //aaa，当一组元素的时候，取值是一组中的第一个

    $('li').html('hello');    //当一组元素的时候，赋值是一组中的所有

});

 

JQ与JS关系

可以共存，不能混用

 

$()下的常用方法

1. has()
2. filter()
3. not()
4. next()
5. prev()
6. find()
7. eq()
8. index()
9. attr()

has()：保留包含特定后代的元素，去掉那些不含有指定后代的元素。

.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。

<ul>


<li>list item 1</li>

<li>list item 2

<ul>

<li>list item 2-a</li>

<li>list item 2-b</li>

                    </ul>

         </li>

 <li>list item 3</li>
 <li>list item 4</li>
</ul>

$('li').has('ul').css('background-color', 'red');    //给含有ul的li加上背景色

 

filter()：筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

$('li').filter('.box').css('backgound' , 'red');     //筛选出class为box的li元素

 

not()：删除与指定表达式匹配的元素。与filter()相反

$('li').not('.box').css('backgound' , 'red');     //筛选出没有class为box的li元素

 

next()：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

PS：这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

 

prev()：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

 

find()：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

<div>

    <h3>h3</h3>

    <h3>h3</h3>

    <h2>h2</h2>

    <h3>h3</h3>    

</div>

$(function(){

    $('div').find('h2').css('background' , 'red');

});    //找到div下面的h2元素背景颜色设置为红色

 

eq()：获取第N个元素

<p> This is just a test.</p> <p> So is this</p>
$("p").eq(1)//[ <p> So is this</p> ],获取匹配的第二个元素

 

index()：搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

 

attr()：设置或返回被选元素的属性值。

<div title = "123">div</div>

 

$(function(){

    alert($('div').atter('title'));

    $('div').atter('title' , '456');    //修改title为456

    $('div').atter('class' , 'box');    //为div添加class属性

});

 

$("img").attr("src","test.jpg");    //为所有图像设置src属性。

$("img").attr({ src: "test.jpg", alt: "Test Image" });    //为所有图像设置src和alt属性。

 

编写选项卡

<div id="div1">

    <input class="active" type="button" value="1">

    <input type="button" value="2">

    <input type="button" value="3">

    <div>1111111</div>

    <div>2222222</div>

    <div>3333333</div>

</div> 

 

#div1 div{

    width:200px;   

    height:200px;

    border:1px solid red;

    display:none;

}

.active{

    background:red;

}

 

原生的写法：

window.onload = function(){

    var oDiv = document.getElementById('div1');

    var aInput = oDiv.getElementsByTagName('input');

    var aCon = oDiv.getElementsByTagName('div');

    for(var i = 0 ; i < aInput.length ; i++){

        aInput[i].index = i;

        aInput[i].onclick = function(){

            for(var i = 0 ; i<aInput.length ; i++){

                aInput[i].className='';

                aCon[i].style.display = 'none';

            }

            this.className='active';

            aCon[this.index].style.display = 'block';

        }

    }

}

 

jQuery的写法：

$(function(){

    $('#div1').find('input').click(function(){

        $('#div1').find('input').attr('class' , '');

        $('#div1').find('div').css('display' , 'none');

        $(this).attr('class' , 'active');

        $('#div1').find('div').eq($(this).index()).css('display','block');

    });

});

 

jQuery方法之属性操作

$()下的常用方法

 

1. addClass()    removeClass()
   
2. width()    innerWidth()    outerWidth()
3. insertBefore()    before()
4. insertAfter()    after()
5. appendTo()    append()
6. prependTo()    prepend()
7. remove()
8. on()    off()
9. scrollTop()

addClass()：添加样式

removeClass()：移出样式

$("p").addClass("selected");
$("p").addClass("selected1 selected2");

 

width()：取得第一个匹配元素当前计算的宽度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的宽    width

innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。    width+padding

outerWidth()：获取第一个匹配元素外部宽度（默认包括补白和边框）。width+padding+border

PS：如果在outerWidth()后面的括号中添加true就可以加上margin。width+padding+border+margi

 

 

 

insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。    

before()：在每个匹配的元素之前插入内容。

 

insertAfter()：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

after()：在每个匹配的元素之后插入内容。

 

appendTo()：把所有匹配的元素追加到另一个指定的元素元素集合中。

append()：向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

 

prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中。

prepend()：向每个匹配的元素内部前置内容。

 

remove()：从DOM中删除所有匹配的元素。

 

on()：在选择元素上绑定一个或多个事件的事件处理函数。

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

    alert('hello');

});

用on改写上面的代码：

$('div').on('click' , function(){

    alert('hello');

});

 

 

$('div').on('click' , function(){

    alert('123');

});

$('div').on('mouseover' , function(){

    alert('456'); 

});

可以连起来写：

$('div').on({

        'click' : function(){

                alert('123');

         },

         'mouseover' : function(){

                alert('456');

         }

});

off()：在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序。

 

scrollTop()：获取匹配元素相对滚动条顶部的偏移。

 

编写弹窗

 

$(function(){

   //var oDiv = $('<div>div</div>'); 

   //$('body').append(oDiv);

});

 

<style type="text/css">

    *{

        margin : 0;

        padding: 0;

    }

    #login{

        width: 300px;

        height:300px;

        border:1px solid red;

        position:absolute;

    }

    #close{

        position:absolute;

        right:0;

        top:0;

    }

</style>

 

<input type="button" value="点击" id="input1">

/*<div id="login">

    <p>用户名：<input type="text" /></p>

    <p>密码：<input type="password" /></p>

    <div id="close">X</div>

</div>*/

 

$(function(){

    $('#input1').click(function(){

        var oLogin = $('<div id="login"><p>用户名：<input type="text" /></p><p>密码：<input type="password" /></p><div id="close">X</div></div>');

        $('body').append(oLogin);

        oLogin.css('left' , ($(window).width()-oLogin.outWidth())/2);

        oLogin.css('top' , ($(window).height()-oLogin.outHeight())/2);

        $('#close').click(function(){

            oLogin.remove();

        })

        $(window).on('resize scroll' , function(){

             oLogin.css('left' , ($(window).width()-oLogin.outWidth())/2);

             oLogin.css('top' , ($(window).height()-oLogin.outHeight())/2 + $(window).scrollTop);

        });

    });

});

 

jQuery方法之事件细节

 

$()下的常用方法

1. ev    pageX    width
   
2. preventDefault    stopPropagation
3. one()
4. offset()    position()
5. offsetParent()
6. val()
7. size()
8. each()

ev：

ev.pageX：鼠标相对于文档的左边缘的位置。

ev.pageY：鼠标相对于文档的顶部边缘的位置。

event.preventDefault()：阻止默认事件行为的触发。

 

one()：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$("p").one("click", function(){
    alert( $(this).text() );
});

 

offset()：获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。    

position()：获取匹配元素相对父元素的偏移。


 

parent()：取得一个包含着所有匹配元素的唯一父元素的元素集合。

offsetParent()：返回第一个匹配元素用于定位的父节点。


 

val()：获得匹配元素的当前值。


$("input").val("hello world!");    //设定文本框的值

/*回调函数*/

$('input:text.items').val(function() {
    return this.value + ' ' + this.className;
});    //设定文本框的值

 

size()：jQuery 对象中元素的个数。

<img src="test1.jpg"/> <img src="test2.jpg"/>

$("img").size();    //2,计算文档中所有图片数量

 

each()：以每一个匹配的元素作为上下文来执行一个函数。

$("li").each(function(i,elem){            //第一个参数：下标    第二个参数：每个元素
    $(elem).html(i);
 });

 

编写拖拽

div{

width: 100px;

height: 100px;

background: red;

position: absolute;

}

<div></div>

 

$(function(){

var disX = 0;

var disY = 0;

$('div').mousedown(function(ev){

disX = ev.pageX - $(this).offset().left;

disY = ev.pageY - $(this).offset().top;

 

$(document).mousemove(function(ev){

$('div').css('left', ev.pageX - disX);

$('div').css('top' , ev.pageY - disY);

});

 

$(document).mouseup(function(){

$(document).off();

});

return false;

});

});

 

jQuery方法之hover和简单动画

 

$()下的常用方法

1. hover()
2. show()    hide()
   
3. fadeIn()    fadeOut()
4. fadeTo()
5. slideDown()    slideUp()

 

hover()：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

 

over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数

 

$("td").hover( function () {  

        $(this).addClass("hover");  

    }, function () { $(this).removeClass("hover"); }

);

show()：显示隐藏的匹配元素。




hide()：隐藏显示的元素。

 

fadeIn()：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

    

fadeOut()：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

 

fadeTo()：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

$("p").fadeTo("slow", 0.66);    //用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度

 

slideDown()：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

 

slideUp()：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。