3.精通前端系列技术之深入学习Jquery(一)

使用Jquery的好处：

  1. •简化JS的复杂操作
  2. •不再需要关心兼容性（原生js获取元素样式、事件需要做兼容性）
  3. •提供大量实用方法

1.选择网页元素

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>

<body>
<ul>
    <li></li>
    <li title="hello"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li title="hello"></li>
</ul>
<script>
('li:first').css('background','red');
('li:last').css('background','red');
$('li:eq(2)').css('background','red');//eq元素中的下标
$('li:odd').css('background','red');//偶数
$('li:even').css('background','red');//奇数

$('li').filter('.box').css('background','red');//filter筛选class是box的li

$('li').filter('[title=hello]').css('background','red');//filter筛选title是hello的li

</script>
</body>
</html>

 2.jQuery设计思想之写法(方法函数化)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>

//方法函数化:

/*window.onload = function(){};

$(function(){});

function $(){}

innerHTML = 123;

html(123)

function html(){}

onclick = function(){};

click(function(){})

function click(){}*/

/*window.onload = function(){
    var oDiv = document.getElementById('div1');
    
    oDiv.onclick = function(){
        alert( this.innerHTML );
    };
    
};*/

$(function(){
    
    //var oDiv = $('#div1');
    
    $('#div1').click(function(){
        
        alert( $(this).html() );
        
    });
    
});

$('ul').children().css('background','red');//jq调用方法带上()

</script>
</head>

<body>
<div id="div1">div</div>

</body>
</html>

3.jQuery设计思想之原生关系和链式操作（jq与js的关系）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>



$(function(){
    
    $('#div1').click(function(){
        
        //alert( $(this).html() );  //jq的写法
        
        //alert( this.innerHTML );  //js的写法
        
        alert( $(this).innerHTML );  //错误的
        alert( this.html() );  //错误的
        
        
        
    });
    
});



</script>
</head>

<body>
<div id="div1">div</div>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>


//链式操作
$(function(){
    
    /*var oDiv = $('#div1');
    
    oDiv.html('hello');
    
    oDiv.css('background','red');
    
    oDiv.click(function(){
        alert(123);
    });*/
    
    $('#div1').html('hello').css('background','red').click(function(){
        alert(123);//链式操作
    });
    
});



</script>
</head>

<body>
<div id="div1">div</div>

</body>
</html>

 4.jQuery设计思想之取值和赋值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>



$(function(){

    //oDiv.innerHTML = 'hello';  //赋值
    
    //alert( oDiv.innerHTML );  //取值
    
    //$('#div1').html('hello');  //赋值
    
    //alert( $('#div1').html() ); //取值
    
    css('width','200px')
    css('width')
});



</script>
</head>

<body>
<div id="div1">div</div>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>



$(function(){


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



</script>
</head>

<body>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
</ul>
</body>
</html>

5.jq常用方法之属性操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>



$(function(){

    //alert($('div').attr('title'));
    
    $('div').attr('title','456');/attr,属性值读取与操作
    $('div').attr('class','box');
    
});



</script>
</head>

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

6.jq常用方法之过滤操作filter与not,针对元素自身做筛选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>

//filter : 过滤
//not : filter的反义词

$(function(){

    //$('div').filter('.box').css('background','red');
    
    $('div').not('.box').css('background','red');
    
});



</script>
</head>

<body>
<div class="box">div1</div>
<div>div2</div>
</body>
</html>

7.jq常用方法之包含操作has     //针对元素内部筛选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>

//has : 包含

$(function(){

    //$('div').has('span').css('background','red');
    
    //$('div').has('.box').css('background','red');
    $('div').filter('.box').css('background','red');
    
});



</script>
</head>

<body>
<div>div1<span class="box">span</span></div>
<div class="box">div2</div>
</body>
</html>

 8.jq常用方法之next   下一个兄弟节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>


$(function(){

    $('div').next().css('background','red');    
    
});



</script>
</head>

<body>
<div>div</div>
<span>span</span>
<p>p</p>
</body>
</html>

9.jq常用方法之find   内部查找符合的元素    eq:元素组下标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>


$(function(){

    //$('div').find('h2').css('background','red');
    
    $('div').find('h2').eq(1).css('background','red');
    
});



</script>
</head>

<body>
<div>
    <h3>h3</h3>
    <h2>h2</h2>
    <h3>h3</h3>
    <h3>h3</h3>
    <h2>h2</h2>
    <h2>h2</h2>
</div>

<h2>h2</h2>

</body>
</html>

10.jq常用方法之index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>


$(function(){

    alert( $('#h').index() );  //索引就是当前元素在所有兄弟节点中的位置
    
});



</script>
</head>

<body>
<div>
    <h3>h3</h3>
    <h2>h2</h2>
    <h3>h3</h3>
    <h3 id="h">h3</h3>
    <h2>h2</h2>
    <h2>h2</h2>
</div>

<h2>h2</h2>

</body>
</html>

 11.jq编写选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 div{ 200px; height:200px; border:1px red solid; display:none;}
.active{ background:red;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
/*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';
            
        };
    }
    
};*/


$(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');
        
    });
    
});
</script>
</head>

<body>
<div id="div1">
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
</body>
</html>

12.jq之addClass  removeClass

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>


$(function(){

    $('div').addClass('box2 box4');
    
    $('div').removeClass('box1');
    
});



</script>
</head>

<body>
<div class="box1 box2">div</div>

</body>
</html>

13.jq之width

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{ 100px; height:100px; background:red; padding:10px; border:10px #000 solid; margin:10px;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>


$(function(){

    alert( $('div').width() );  //width
    
    alert( $('div').innerWidth() );  //width + padding
    
    alert( $('div').outerWidth() );  //width + padding + border
    
    alert( $('div').outerWidth(true) );  //width + padding + border + margin
    
});



</script>
</head>

<body>
<div>div</div>

</body>
</html>

14.jq之insertBefore  insertAfter

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>


//appendTo : appendChild

$(function(){

    //$('span').insertBefore( $('div') );
    
    //$('div').insertAfter( $('span') );
    
    //$('div').appendTo( $('span') );//最下面
    
    //$('div').prependTo( $('span') );//最上面
    
    
    
    //区别 ：后续操作变了
    
    //$('span').insertBefore( $('div') ).css('background','red');
    
    $('div').before( $('span') ).css('background','red');
    
});



</script>
</head>

<body>
<div>div</div>
<span>span</span>
</body>
</html>

15.jq之remove

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>

$(function(){

    $('div').remove();
    
});



</script>
</head>

<body>
<div>div</div>
<span>span</span>
</body>
</html>

16.jq的事件写法  on/off

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>

$(function(){

    /*$('div').click(function(){
        alert(123);
    });*/
    
    /*$('div').on('click',function(){
        alert(123);
    });*/
    
    /*$('div').on('click mouseover',function(){
        alert(123);
    });*/
    
    /*$('div').on({
        'click' : function(){
            alert(123);
        },
        'mouseover' : function(){
            alert(456);
        }
    });*/
    
    $('div').on('click mouseover',function(){
        alert(123);
        $('div').off('mouseover');
    });
    
});



</script>
</head>

<body>
<div>div</div>
<span>span</span>
</body>
</html>

17.jq 之滚动距离

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>

$(function(){

    $(document).click(function(){
        
        alert( $(window).scrollTop() );  //滚动距离
        
    });
    
});



</script>
</head>

<body style="height:2000px;">
<div>div</div>
<span>span</span>
</body>
</html>

18.jq之编写弹框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#login{ 300px; height:300px; border:1px #000 solid; position:absolute;}
#close{ position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>

$(function(){
    
    //var oDiv = $('<div>div</div>');
    //$('body').append( oDiv );
    
    $('#input1').click(function(){
        
        var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>');
        
        $('body').append( oLogin );
        
        oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
        oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 );
        
        
        $('#close').click(function(){
            
            oLogin.remove();
            
        });
        
        
        $(window).on('resize scroll',function(){
            
            oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
        oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );
            
        });
        
    });
    
});

</script>
</head>

<body style="height:2000px;">
<input type="button" value="点击" id="input1" />
<!--<div id="login">
    <p>用户名:<input type="text" /></p>
    <p>密码:<input type="text" /></p>
    <div id="close">X</div>
</div>-->
</body>
</html>

19.jq之事件细节

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>

$(function(){

    /*$('div').click(function(ev){
        
        //ev : event对象
        
        //ev.pageX(相对于文档的) : clientX(相对于可视区)
        
        //ev.which : keyCode
        
        ev.preventDefault();  //阻止默认事件
        
        ev.stopPropagation();  //阻止冒泡的操作
        
        return false;   //阻止默认事件 + 阻止冒泡的操作
        
    });*/
    
    $('div').one('click',function(){  //只执行事件一次
        alert(123);
    });
    
});



</script>
</head>

<body>
<div>div</div>
<span>span</span>
</body>
</html>

20.jq之位置操作

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kingCpp/p/4838503.html