博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML Jquery
阅读量:5319 次
发布时间:2019-06-14

本文共 2436 字,大约阅读时间需要 8 分钟。

在《网页制作Dreamweaver(悬浮动态分层导航)》中,运用到了jQuery的技术,轻松实现了菜单的下拉、显示、隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery具体是如何使用的,以下会详细讲述jQuery的基础用法:

1、安装:

http://jquery.com/download/登陆这个jQuery的下载站点,里面有以下几个选项:

 

一般的开发者选择(1)下载就可以了,文件比较小,也够用,当然需要开发jQuery的可以下载(2

下载完成后,进入DW,在.html文件的<head>标签中导入,例:

<head>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>

HTML5不需要写type="text/javascript"

——————————————————————————————

2、语法和选择器:

   $(selector).action()

美元符号定义 jQuery

选择符(selector查询查找” HTML 元素——选择器

jQuery action() 执行对元素的操作——事件

  selector选择器的用法:

语法

描述

$(this)

当前 HTML 元素

$("p")

所有 <p> 元素

$("p.intro")

所有 class="intro" <p> 元素

$(".intro")

所有 class="intro" 的元素

$("#intro")

id="intro" 的元素

$("ul li:first")

每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head")

id="intro" <div> 元素中的所有 class="head" 的元素

 

事件

定义

即当HTML中发生某些事(点击、鼠标移过等)的时候调用的方法

$(selector).action()

 

 

 

触发

事件的触发有两种方法:

1、直接将事件click写在<javascript>

 

 

<head>

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

</script>

<script type="text/javascript">

$(document).ready(function(){ 

$("button").click(function(){ 

$("p").hide(); 

}); });

</script>

</head>

<body>

<button type="button">点击这里让文字消失</button>

<p>我会消失</p>

</body>

 

 

*各种Event函数的写法和作用:

Event 函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件(当文档完成加载时)

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

2、在body标签中通过onclick引用已经写好的方法:

 

<script>function visible1()

$("p").hide();

};

</script>

</head>

<body>

<input type="button" onclick = "visible1()" value = "点这里让文字消失"/>

<p>我会消失。</p>

 

常用的jQuery函数

1、隐藏/显示/隐藏显示切换:.hide()     .show()      .toggle()

2、淡入/淡出/淡入淡出切换/fadeTo.fadeIn()    .fadeOut()    .fadeToggle()    .fadeTo("时间","透明度")

3、滑动:.slideDown()    .slideUp()    .slideToggle()

4、动画效果:.animation({css样式表的属性值},"slow/fast/自定义时长(毫秒,去掉外面的双引号)")

5、停止动画:.stop() 适用于所有jQuery效果函数,包括以上列举的几种,停止正在执行的所有动画效果

6Callback的用法:在动画执行完成后进行下一函数的执行,如下面用下划线标识出来的部分即为Callback

 

<script type="text/javascript">

$(document).ready(function(){  

$("button").click(function(){

$("p").hide(1000,function(){alert("The paragraph is now hidden");    

});  

});

});

</script>

 

7Chaining:几种函数的链接,如:

<script>

$(document).ready(function()  {  

$("button").click(function(){    

$("#p1").css("color","red").slideUp(2000).slideDown(2000);  

});

});

</script>

 

转载于:https://www.cnblogs.com/1711643472qq/p/5856918.html

你可能感兴趣的文章
String类中的toUpperCase()和toLowerCase()方法
查看>>
python知识思维导图
查看>>
IIS建网站以及建FTP
查看>>
当心JavaScript奇葩的逗号表达式
查看>>
@修饰符--python中的装饰器
查看>>
新工具
查看>>
如何学习-维果茨基
查看>>
App Store最新审核指南(2015年3月更新版)
查看>>
织梦MIP文章内容页图片适配百度MIP规范
查看>>
学习AS3菜鸟起飞吧之—函数(二):函数之返回语句
查看>>
sap basis 常用事务码 --转
查看>>
迭代器
查看>>
传入值参数&传入引用参数的区别
查看>>
第13课 - 自动生成依赖关系(下)
查看>>
POJ No.2386【B007】
查看>>
点击复制插件clipboard.js
查看>>
LeetCode : Pascal's Triangle
查看>>
mysql优化
查看>>
[Kali_BT]通过低版本SerialPort蓝牙渗透功能手机
查看>>
Oracle命令--创建表空间、创建临时表空间、创建用户
查看>>