分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

jQuery学习

发布时间:2023-09-06 01:50责任编辑:郭大石关键词:jQuery

什么是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学习

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved