欢迎使用CSDN-markdown编辑器

图像替换技术

       .logo{            text-indent: -5000px;            background: url("img/favorite.png") no-repeat;            height:100px;        }<h3 class="logo">这是JD购物网站</h3>

JQ

JQ操作css

>
class名为div元素添加css样式：
>
$(‘.div’).css(‘width’,’300px’).css(‘height’,’300px’).css(‘border’,’1px red solid’).text(‘你好’);

一个函数简单的windos.onload=function(){}

    $(function(){        var a=5;        var b=6;        var c=a+b;        alert('和为：'+c);    });

jq转换为js(dom)

    var $q=$('#div');    var p=$q.get(0);    p.innerHTML="jq转换为js(dom)";

js(dom)转换为jq

    var div=document.getElementById('div');    var $div=$(div);        $div.text('js(dom)转换为jq');

改变css样式

       $('#div').css('width','400px').css('background','red');

JQ操作dom

>
HTML代码：
>

• 11111
• 22222
• 333333

>
JQ:代码：
>
$(function(){

   var $a=$('ul li:eq(0)');   alert($a.text()); //查找某个元素:eq(0)  var $a=$('li');   $a.attr('class','asda'); //查找属性与替换属性值attr   var $a=$('li');   $a.removeAttr('class') //删除属性用removeAttr  var $hi=$('<li>你好</li>');   $('ul').append($hi); //在ul里面添加一个子元素<li>你好</li>   var $hi=$('<li>ni hao </li>');   $hi.appendTo($('li:eq(0)')); //在li里面添加一个兄弟元素<li>你好</li>appendTo   })     var $li=$('span:eq(0)').remove();//删除节点（所有）remove()           $('li').remove('li[class=lia]');//删除class名为lia的li元素这个节点   $('li').empty();//清空li元素内容empty()   $('li').clone().appendTo('span');//复制所有的li元素追加到span元素里面去clone()  

jq动画

HTML代码：

<button>测试</button><ul>    <li title='1'>苹果</li>    <li title='2'>橘子</li>    <li title='3'>菠萝</li></ul>  

JQ代码：

     //给元素button绑定一个点击事件，方法是：让toggle使ul动画显示或隐藏 $('ul').toggle(50)    $('button').click(function(){        $('ul').toggle(50);    })    //给元素button绑定一个点击事件，可以用另一种方法：$('ul').slidToggle()    $('button').toggle(function(){        $("ul").slideUp()    },function(){                $("ul").slideDown();            })     //fadeToggle或fadeIn    fadeOut---淡入淡出效果    $('button').click(function(){        $('ul').fadeToggle();    })  

自定义移动：
>
HTML代码：

css代码：          div{               width: 200px;               height: 200px;               background-color: royalblue;               position: absolute;           }   JQ代码：           //自定义移动 animate          $('div').click(function(){              $('div').animate({left:'500px'},2000)          })

练习：1.点击显示更多内容：

HTML代码：

<div class="big"><div class="one"></div><div class="one"></div><p class="p">加载更多</p><div class="two"></div><div class="two"></div></div>  

JQ代码： animate

$(function(){ var $p=$('.p').toggle(           function(){            $('.p').animate({width:'50px',left:'600px',height:'20px'},1000).text('收起')               $('.two').fadeIn(1000);        },           function(){            $('.p').animate({width:'620px',left:'30px',height:'40px'},1000).text('加载更多')               $('.two'). fadeOut(1000);        })      })  

练习：2.鼠标移入显示相应内容：

css代码：

$(function(){ul li{    list-style: none;    float: left;    margin-left: 50px;}ul{    padding: 1px;}.one,.two,.three,.four{    border: 1px royalblue solid;    width: 300px;    height: 300px;    margin-top: 50px;    display: none;    margin-left: 30px;} })

HTML代码：

<ul><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li></ul><div class="one">aaaaaaaaaaaaaa</div><div class="two">bbbbbbbbbbbbbbbbbbb</div><div class="three">cccccccccccccccccccc</div><div class="four">dddddddddddddddddddddd</div>  

JQ代码： hover

$(function(){ $('li:eq(0)').hover(function(){    $('.one').show()    $('.two').hide()    $('.three').hide()    $('.four').hide()})$('li:eq(1)').hover(function(){    $('.one').hide()    $('.two').show()    $('.three').hide()    $('.four').hide()})$('li:eq(2)').hover(function(){    $('.one').hide()    $('.two').hide()    $('.three').show()    $('.four').hide()})$('li:eq(3)').hover(function(){    $('.one').hide()    $('.two').hide()    $('.three').hide()    $('.four').show()})})  

练习：3.当滚动条发生变化时触发

>
css代码：
>
.div{
width: 70px;
height: 300px;
border: 1px saddlebrown solid;
margin-top: 100px;
display: none;
position: fixed;
background-color: royalblue;
}
.big{
width: 800px;
height: 2000px;
border: 1px saddlebrown solid;
}
>
HTML代码：
>

>
JQ代码： 在每一个匹配元素的scroll事件中绑定的处理函数。scrollTop
>
(window).scroll(function(){   //注意：window和document不能加“ ”  
       if((document).scrollTop()>30){
(‘.div’).fadeIn(2000)  
       }if((document).scrollTop()<30){
$(‘.div’).fadeOut(2000)
}
})