又双叒叕来一波

jQuery

开发工具与关键技术:DW,jQuery滑动事件
作者:蛋蛋
撰写时间:2019年1月18日

一、
jQuery是一个javascript库,极大的简化了javascript编程。jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数可以通过下面的标记把 jQuery 添加到网页中:
在这里插入图片描述
请注意,script> 标签应该位于页面的 head> 部分
提示:您是否很疑惑为什么我们没有在 script> 标签中使用type=“text/javascript” ?
在 HTML5 中不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!

二.
Jquery语法(jquery语法是为html元素的选取编制的,可以对元素执行某些操作)
基础语法是$(selector).action()
a. 美元符号定义jquery
b. 选择符(selector)“查询”和“查找”HTML元素;
c. Jquery的action()执行元素的操作;

示例:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class=“test” 的所有元素
$("#test").hide() - 隐藏所有 id=“test” 的元素

三.
我们接下来看一个例子: Juqery效果-滑动 通过 jQuery,您可以在元素上创建滑动
效果见图一:

又双叒叕来一波_第1张图片
Ø slideUp() 方法用于向上滑动
Ø slideDown()方法用于向下滑动
Ø slideToggle()而jQuery slideToggle() 方法可以在 slideUp()与slideDown()方法之间进行切换
接下来如图二:在这里插入图片描述
再图三最终效果图:

又双叒叕来一波_第2张图片
图二与图三从视觉上给人感觉不符?

                  待跟进?

你可能感兴趣的:(前端)