返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

jQuery入门到精通第一课

2020-04-09 文章标签: jQuery 培训 浏览次数:

什么是jquery?jquery有什么优点?

jQuery入门到精通第一课

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jquery极大的简化了js代码量也提高了运行效率,插件也十分丰富,受到众多开发者的喜爱,下面介绍一下怎么使用jquery

1.下载jQuery

这个下载网上有很多,最新的版本好像到了jquery-1.11.2,网络上很多网站可以下载,也可以直接引用公用百度或者其他cdn

2.安装jQuery

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

直接在header头部引用就可以了

3.测试jQuery

前奏都做完了,怎么测试是否引用成功呢,我们来看看jquery的语法,这里引用一个

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
    alert("hello world");
})
</script>

4. jQuery案例小实战

4.1操作html里面dom元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var $li = $("li"); //返回jQuery对象
    var li =$li[0];//返回DOM对象
    alert(li.innerHTML);
})
</script>
<title></title>
</head>
<body>
<ul>
    <li>故人西辞黄鹤楼,</li>
    <li>烟花三月下扬州。</li>
    <li>孤帆远影碧空尽,</li>
    <li>唯见长江天际流。</li>
</ul>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var $li = $("li");//返回jQuery对象
    var li =$li.get(0);//返回DOM对象
    alert(li.innerHTML);
})
</script>
<title></title>
</head>
<body>
<ul>
    <li>故人西辞黄鹤楼,</li>
    <li>烟花三月下扬州。</li>
    <li>孤帆远影碧空尽,</li>
    <li>唯见长江天际流。</li>
</ul>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var li = document.getElementsByTagName("li");//获取所有li元素
    var $li = $(li[0]);//把第一个li元素封装为jQuery对象
    alert($li.html());//调用jQuery对象的方法
})
</script>
<title></title>
</head>
<body>
<ul>
    <li>故人西辞黄鹤楼,</li>
    <li>烟花三月下扬州。</li>
    <li>孤帆远影碧空尽,</li>
    <li>唯见长江天际流。</li>
</ul>
</body>
</html>

demo4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var li = document.getElementsByTagName("li"); //获取所有li元素
    var $li = $(li);//把所有li元素封装为jQuery对象
    alert($li.html()); //调用jQuery对象的方法
})
</script>
<title></title>
</head>
<body>
<ul>
    <li>故人西辞黄鹤楼,</li>
    <li>烟花三月下扬州。</li>
    <li>孤帆远影碧空尽,</li>
    <li>唯见长江天际流。</li>
</ul>
</body>
</html>

5.jquery单一操作入口

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
jQuery("div#wrap>p:first").addClass("red");
});
</script>
<title></title>
<style type="text/css">
.red { color:red;}
</style>
</head>
<body>
<div id="wrap">
    <p>故人西辞黄鹤楼,</p>
    <p>烟花三月下扬州。</p>
    <p>孤帆远影碧空尽,</p>
    <p>唯见长江天际流。</p>
</div>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('ul').append($('<li>新的列表项目</li>'));
});
</script>
<title></title>
<style type="text/css">
.red { color:red;}
</style>
</head>
<body>
<ul id="wrap">
</ul>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ 
    $('ul').css('color','red');
});
</script>
<title></title>
<style type="text/css">
.red { color:red;}
</style>
</head>
<body>
<ul id="wrap">
    <li>故人西辞黄鹤楼,</li>
    <li>烟花三月下扬州。</li>
    <li>孤帆远影碧空尽,</li>
    <li>唯见长江天际流。</li>
</ul>
</body>
</html>

demo4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
    $('ul').css('color','red');
});
</script>
<title></title>
<style type="text/css">
.red { color:red;}
</style>
</head>
<body>
<ul id="wrap">
    <li>故人西辞黄鹤楼,</li>
    <li>烟花三月下扬州。</li>
    <li>孤帆远影碧空尽,</li>
    <li>唯见长江天际流。</li>
</ul>
</body>
</html>

6.jquery链式语法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    //第一行代码,在文档中添加四个按钮
    $('<input type="button" value="第一个按钮"/><input type="button" value="第二个按钮"/><input type="button" value="删除按钮事件处理函数"/><input type="button" value="隐藏或显示文本"/>').appendTo($('body'));
    //第二行代码,分别选中四个按钮,并为它们绑定不同的事件处理函数
    $('input[type="button"]')
    .eq(0).click(function(){//匹配第一个按钮,并绑定click事件处理函数
        alert('是第一个按钮的事件处理函数');
    }).end().eq(1)//返回所有按钮,再匹配第二个按钮
    .click(function(){//为第二个按钮绑定click事件处理函数
        $('input[type="button"]:eq(0)').trigger('click');
    }).end().eq(2)//返回所有按钮,再匹配第三个按钮
    .click(function(){//为第三个按钮绑定click事件处理函数
        $('input[type="button"]:eq(0)').unbind('click');
    }).end().eq(3) //返回所有按钮,再匹配第四个按钮
    .toggle(function(){//为第四个按钮绑定toggle事件处理函数
        $('.panel').hide('slow');
    }, function(){
        $('.panel').show('slow');
    });
});
</script>
<title></title>
</head>
<body>
<div class="panel">jQuery链式语法演示</div>
</body>
</html>

7.jquery CSS选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("input[type='button']").click(function(){//匹配提交按钮,并绑定事件处理函数
        var i = 0;//初始化临时变量
        $("input[type='text']").each(function(){//枚举每个文本框,获其值,然后相加
            i += parseInt($(this).val());
        });
        $('label').text(i);//显示结果
    });
    $('input:lt(2)')//匹配非提交按钮,以及<label>标签,通过链式语法定义样式
        .add('label')
        .css('border','none')
        .css('borderBottom','solid 1px navy')
        .css('textAlign','center')
        .css('width','3em')
        .css({'width':'30px'});
});
</script>
<title></title>
</head>
<body>
<input type="text" value="" /> + 
<input type="text" value="" />
<input type="button" value="=" />
<label></label>
</body>
</html>

8.jquery 写扩展函数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.fn.extend({ //调用扩展函数
    check: function() {//为表单元素扩展check函数,勾选单选按钮或者复选框
        return this.each(function() { this.checked = true; });
    },
    uncheck: function() {//为表单元素扩展check函数,取消勾选单选按钮或者复选框
        return this.each(function() { this.checked = false; });
    }
});
$(function(){//应用扩展函数
    $("input[type=checkbox]").check().css("border","solid 1px red");
    $("input[type=radio]").uncheck().css("border","solid 1px blue");
});
</script>
<title></title>
</head>
<body>
<input type="radio"  />
<input type="radio" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
</body>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。