码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习

时间:2018-04-17 19:38:40      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:一个   开头   类型   anim   llb   ready   jquery   head   思考   

什么是jQuery?

  jQuery是一个JavaScript函数库。

  jQuery有以下功能:

  1、html元素的选取

  2、html元素操作

  3、css操作

  4、html事件函数

  5、JavaScript特效和动画

  jQuery的简单使用:

    首先,我知道jQuery是一个JavaScript的函数库,那我们就先要在html中引入这个库。引入的时候我们可以直接把这个库下载的本地,也可以远程用链接引入。下面引入的方法是远程链接引入:

<head>
  <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

    基础语法:$(selector).action()

      美元符号定义jQuery;选择符(selector)查询或查找html; jQuery的action()执行元素的操作。

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

   下面是一种简洁写法,与上面的写法相同:

$(function(){
 
   // 开始写 jQuery 代码...
 
});

jQuery选项器

  jQuery选择器是基于元素id、类、类型、属性、属性值等查找或选择HTML元素,基于已经存在的cs选择器,之外还有一些自定义的选择器。jQuery中所有的选择器都以美元符号开头:¥()

  1、元素选择器

    基于元素名选取元素。

    例如:在页面选取所有<p>元素:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

  2、#id选择器

    #id选择器通过HTML中id的属性选取指定的元素。注意:html中的id的属性是唯一的。

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

  3、.class选择器

    jQuery类选择器可以通过指定的class查找元素

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

jQuery事件

  1、click()事件

    click()方法时当按钮点击事件被触发思考hi调用一个函数

$("p").click(function(){
  $(this).hide();
});

    下面不会再列出代码实例,因为代码实例大都相同,只需要把事件方法名换一下就好了。  

  2、dblclick()事件

    dblclick()方法是当双击元素时,触发事件

  3、mouseenter()事件

    当鼠标穿过元素时,会触发

  4、mouseleave()事件

    当鼠标指针离开元素时,会触发

  5、mousedown()事件

    当鼠标指针移动到元素上方,并按下鼠标按键时,会触发

  6、mouseup()事件

    当在元素上方松开鼠标按钮,会触发

  7、hover()事件

       当鼠标移动到元素上方时,会触发

jQuery动画

  animate() 方法用于创建自定义的动画。

  语法:

$(selector).animate({params},speed,callback);

  params参数顶一个形成动画的css属性,必须的;

  speed参数规定效果时长。它可以取以下值:“slow”,"fast"或者毫秒,可选的;

  callback参数是动画完成后所执行的函数名称,可选的。

$("button").click(function(){
  $("div").animate({left:‘250px‘});//向右边移动250个像素
});

  注:animate() 方法可以使用相对值。需要在值的前面加上+=或-=,也可以使用预定义的值。

  

 

jQuery学习

标签:一个   开头   类型   anim   llb   ready   jquery   head   思考   

原文地址:https://www.cnblogs.com/leilei0327/p/8866317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!