首页 > Web开发 > 详细

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

时间：2015-09-25 18:24:35      阅读：266      评论：0      收藏：0      [点我收藏+]

使用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{ width: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{ width: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之编写弹框

 

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

原文：http://www.cnblogs.com/kingCpp/p/4838503.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！