您的位置：首页 > Web前端 > JQuery

JQuery入门

2016-05-09 19:23 591 查看
一．什么是jQuery

jQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是JohnResig，于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。

       在开始学jQuery之前，我们要先下载JQuery的最新版本，jquery-2.0.2.js 。下载好后，我们可以先在www目录下先创建一个文件夹JQ，然后把jquery-2.0.2.js放在里面，然后新建index.html，也放在该目录下。在index.html里写以下代码：

<!DOCTYPE html>
<html>
<head>
<title>JQ入门</title>
<script src="jquery-2.0.2.js"></script>  <!--引入JQ文件-->
</head>
<body>
<h3 style="margin:200px auto;background:#9cf;padding:10px;width:80px;cursor:pointer">JQ入门</h3>
<script type="text/javascript">
$('h3').click(function (){  //点击h3后触发事件
alert("我是h3");   //弹窗
})
</script>
</body>
</html>
运行后网页就会弹窗，显示"我是h3"。
在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象：

jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：

$('#box'); //进行执行的ID元素选择
$('#box').css('color','red'); //执行功能函数

值得一提的是，执行了.css()这个功能函数后，最终返回的还是jQuery对象，那么也就是说，jQuery的代码模式是采用的连缀方式，

可以不停的连续调用功能函数。

$('#box').css('color','red').css('font-size', '50px'); //连缀
        jQuery想要达到获取原生的DOM对象，可以这么处理：

<!DOCTYPE html>
<html>
<head>
<title>JQ入门</title>
<script src="jquery-2.0.2.js"></script>  <!--引入JQ文件-->
</head>
<body>
<div id="box" style="margin:200px auto;background:#9cf;padding:10px;width:80px;cursor:pointer">我是box</div>
<script type="text/javascript">
alert($("#box").get(0));//通过JQ来获取原生的DOM对象
</script>
</body>
</html>
        

     运行效果如下图所示：



   二、JQuery选择器和过滤器

    1.选择器

在使用jQuery选择器时，我们首先必须使用“$()”函数来包装我们的CSS规则。而CSS规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对象。随后，我们就可以对这个获取到的DOM节点进行行为操作了。

#box{ color:red;}   //使用ID选择器的CSS规则将ID为box的元素字体颜色变红
在jQuery选择器里，我们使用如下的方式获取同样的结果：
$('#box').css('color','red'); //获取DOM节点对象，并添加行为
那么除了ID选择器之外，还有两种基本的选择器，分别为：元素标签名和类(class)：
 



在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。

进阶选择器：包括群组、后代、通配选择器。



//群组选择器
span,em,.box{color:red;} //多种选择器添加红色字体
$('span,em,.box').css('color','red'); //群组选择器jQuery方式
//后代选择器
ul li a{ color:red;}//层层追溯到的元素添加红色字体
$('ul li a').css('color','red'); //群组选择器jQuery方式
//通配选择器
*{ color:red;}//页面所有元素都添加红色字体
$('*').css('color','red'); //通配选择器
 

    高级选择器，也叫做层次选择器，可以处理很多特殊的元素，比如父子关系的元素，兄弟关系的元素，特殊属性的元素等等。

/*后代选择器,获取追溯到的多个DOM对象*/
$('#box p').css('color','red');  //后代选择器
$('#box').find('p').css('color','red'); //find()方法,和后代选择器等价
/*子选择器，只获取子类节点的多个DOM对象,孙子后失明*/
$('#box>p').css('color','red'); //子选择器
$('#box').children('p').css('color','red'); //children()方法,和子选择器等价
/*next选择器,只获取某节点后一个同级DOM对象*/
$('#box+p').css('color','red'); //next选择器
$('#box').next('p').css('color','red'); //next()方法,和next选择器等价
/*nextAll选择器,获取某节点后面所有同级DOM对象)*/
$('#box~p').css('color','red'); //nextAll选择器
$('#box').nextAll('p').css('color','red'); //nextAll()方法,和nextAll选择器等价
/*类似的，还有prev(),prevAll()方法，用来获取某节点前面一个或所有同级DOM对象*/
$('#box').prev('p').css('color','red'); //同级上一个元素
$('#box').prevAll('p').css('color','red'); //同级所有上面的元素
/*siblings()方法正好集成了prevAll()和nextAll()两个功能的效果，及上下相邻的所有元素进行选定：*/
$('#box').siblings('p').css('color','red'); //同级上下所有元素选定
//等价于下面：
$('#box').prevAll('p').css('color','red'); //同级上所有元素选定
$('#box').nextAll('p').css('color','red'); //同级下所有元素选定


         2.过滤器

过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与CSS3(http://t.mb5u.com/css3/)里的伪类，可以让不支持CSS3的低版本浏览器也能支持。和常规

选择器一样，jQuery为了更方便开发者使用，提供了很多独有的过滤器。过滤器主要通过特定的过滤规则来筛选所需的DOM元素，和CSS中的伪类的语法类似：使用冒号(:)开头。



      举例说明：

$('li:first').css('background', '#ccc'); //第一个元素
$('li:last').css('background','#ccc'); //最后一个元素
$('li:not(.red)').css('background','#ccc'); //非class为red的元素
$('li:even').css('background', '#ccc'); //索引为偶数的元素
$('li:odd').css('background','#ccc'); //索引为奇数的元素
$('li:eq(2)').css('background','#ccc'); //指定索引值的元素
$('li:gt(2)').css('background','#ccc'); //大于索引值的元素
$('li:lt(2)').css('background','#ccc'); //小于索引值的元素
$(':header').css('background', '#ccc'); //页面所有h1~h6元素
jQuery为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：

$('li').eq(2).css('background','#ccc'); //元素li的第三个元素，负数从后开始
$('li').first().css('background','#ccc'); //元素li的第一个元素
$('li').last().css('background','#ccc'); //元素li的最后一个元素
$('li').not('.red').css('background','#ccc'); //元素li不含class为red的元素


  三、基础DOM和CSS操作

DOM是一种文档对象模型，方便开发者对HTML结构元素内容进行展示和修改。在JavaScript中，DOM不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容

性、扩展性。在jQuery中，已经将最常用的DOM操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。

      1.设置元素及内容

     


          在常规的DOM元素中，我们可以使用html()和text()方法获取内部的数据。html()方法可以获取或设置html内容，text()可以获取或设置文本内容。

$('#box').html(); //获取html内容
$('#box').text(); //获取文本内容，会自动清理html标签
$('#box').html('<em>www.li.cc</em>'); //设置html内容
$('#box').text('<em>www.li.cc</em>'); //设置文本内容，会自动转义html标签
  注意：当我们使用html()或text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。

$('#box').html($('#box').html()+'<em>www.li.cc</em>'); //追加数据

如果元素是表单的话，jQuery提供了val()方法进行获取或设置内部的文本数据。

$('input').val(); //获取表单内容
$('input').val('www.li.cc'); //设置表单内容

2．元素属性操作

除了对元素内容进行设置和获取，通过jQuery也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。



$('div').attr('title'); //获取属性的属性值
$('div').attr('title','我是域名'); //设置属性及属性值
$('div').attr('title',function(){ //通过匿名函数返回属性值
return '我是域名';
});
$('div').attr('title',function(index,value){ //可以接受两个参数
return	value+(index+1)+'，我是域名';
});
$('div').removeAttr('title');   //删除指定的属性


3.元素样式操作

对元素的样式进行设置，修改，获取操作。



/*获取元素行内CSS样式的颜色*/
$('div').css('color');
/*设置元素行内CSS样式颜色为红色*/
$('div').css('color','red');
/*在需要设置多个样式的时候，我们可以传递多个CSS样式的键值对即可。*/
$('div').css({
'background-color' :'#ccc',
'color' :'red',
'font-size' :'20px'
});


     四、事件入门

JavaScript事件是由访问Web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。一般是用于浏览器和用户操作进行交互。最早是IE和NetscapeNavigator中出现，作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。

      1.内联模型的事件

这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是HTML标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和HTML混写的，并没有与HTML分离。

<!--在HTML中把事件处理函数作为属性执行JS代码-->
<input type="button" value="按钮" onclick="alert('Lee');" /> <!--注意单双引号-->
      2.脚本模型的事件

由于内联模型违反了HTML与JavaScript代码层次分离的原则。为了解决这个问题，我们可以在JavaScript中处理事件。这种处理方式就是脚本模型。

var box=document.getElementById('Box'); //得到boxt对象
box.onclick=function(){ //匿名函数执行
alert('我是box');
};
     3.绑定事件

    在JavaScript课程的学习中，我们掌握了很多使用的事件，常用的事件有：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。那么，还有更多的事件可以参考手册中的事件部分。jQuery通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type,[data],fn)，type表示一个或多个类型的事件名字符串；[data]是可选的，作为event.data属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn表示绑定到指定元素的处理函数。

//使用点击事件
$('input').bind('click',function(){ //点击按钮后执行匿名函数
alert('点击！');
});
//普通处理函数
$('input').bind('click',fn); //执行普通函数式无须圆括号
function fn(){
alert('点击！');
}

使用unbind删除绑定的事件

$('input').unbind(); //删除所有当前元素的事件


     4.事件函数

    为了使开发者更加方便的绑定事件，jQuery封装了常用的事件函数以便节约更多的代码。我们称它为简写事件。

             JS事件包括鼠标事件，键盘事件，HTML事件







  示例：

<!DOCTYPE html>
<html>
<head>
<title>JQ入门</title>
<script src="jquery-2.0.2.js"></script>  <!--引入JQ文件-->
</head>
<body>
<!--HTML部分-->
<div style="width:200px;height:200px;background:red;">
<input type="text" value=""/>
</div>
<strong></strong>
<script type="text/javascript">
//focus光标激活
$('input').focus(function (){ //当前元素触发
$('strong').html('123');
});
</script>
</body>
</html>

五、JQ动画入门

          在以前很长一段时间里，网页上的各种特效还需要采用flash在进行。但最近几年里，我们已经很少看到这种情况了，绝大部分已经使用JavaScript动画效果来取代flash。这里说的取代是网页特效部分，而不是动画。网页特效比如：渐变菜单、渐进显示、图片轮播等；而动画比如：

故事情节广告、MV等等。

         1.显示、隐藏

  jQuery中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显示内容和隐藏内容。

<!DOCTYPE html>
<html>
<head>
<title>JQ动画</title>
<script src="jquery-2.0.2.js"></script>  <!--引入JQ文件-->
</head>
<body>
<input type="button" value="点我试试" style="margin:100px"/>
<div id="box" style="width:300px;height:300px;margin:50px;background:red"></div>
<script type="text/javascript">
var tag=1;
$('input').click(function(){ //显示
if(tag%2==0)  $('#box').show();
else $('#box').hide();
tag++;
});
</script>
</body>
</html>
 2.滑动、卷动、收缩
jQuery提供了一组改变元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顾名思义，向上收缩(卷动)和向下展开(滑动)。
<!DOCTYPE html>
<html>
<head>
<title>JQ动画</title>
<script src="jquery-2.0.2.js"></script>  <!--引入JQ文件-->
</head>
<body>
<input type="button" value="点我向下展开" style="margin:100px"/>
<input type="button" value="点我向上收缩" style="margin:100px"/>
<input type="button" value="点我收缩" style="margin:100px"/>
<div id="box" style="width:300px;height:300px;margin:50px;background:red"></div>
<script type="text/javascript">
$('input').eq(0).click(function(){
$('#box').slideDown();  //向上收缩
});
$('input').eq(1).click(function(){
$('#box').slideUp();   //向上收缩
});
$('input').eq(2).click(function(){
$('#box').slideToggle();  //收缩
});
</script>
</body>
</html>


     3.自定义动画

jQuery提供了几种简单常用的固定动画方面我们使用。但有些时候，这些简单动画无法满足我们更加复杂的需求。这个时候，jQuery提供了一个.animate()方法来创建

我们的自定义动画，满足更多复杂多变的要求。

     同步动画，设置多个css的目标值

<!DOCTYPE html>
<html>
<head>
<title>JQ动画</title>
<script src="jquery-2.0.2.js"></script>  <!--引入JQ文件-->
</head>
<body>
<input type="button" value="点我变大" style="margin:100px"/>
<input type="button" value="点我移动" style="margin:100px"/>
<div id="box" style="width:50px;height:50px;margin:50px;background:red;position:relative"></div>
<script type="text/javascript">
/*变大*/
$('input').eq(0).click(function(){
$('#box').animate({
'width' :'300px',  //目标宽度
'height' :'200px',  //目标高度
'fontSize' :'50px',  //目标字体大小
'opacity' :0.5  //目标透明度
});
});
/*移动*/
$('input').eq(1).click(function(){
$('#box').animate({
'left' :'300px',   //目标离浏览器窗口左边界的位置
'top' :'200px',   //目标离浏览器窗口上边界的位置
},1000);     //1000毫秒，即1秒，就是动画执行的时间，去掉会有默认的时间
});
</script>
</body>
</html>

列队动画，通过连缀的方法不停的调用animate

<!DOCTYPE html>
<html>
<head>
<title>JQ动画</title>
<script src="jquery-2.0.2.js"></script>  <!--引入JQ文件-->
</head>
<body>
<input type="button" value="点我实现列队动画" style="margin:100px"/>
<div id="box" style="width:50px;height:50px;margin:50px;background:red;position:relative"></div>
<script type="text/javascript">
$('input').click(function(){
$('#box').animate({
'left' :'100px'
},function(){
$('#box').animate({
'top' :'100px'
},function(){
$('#box').animate({
'width' :'300px'
});
});
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JQuery 函数 css javascript dom
相关文章推荐
新的分享
章节导航