jQuary 效果

jQuary可以对HTML元素或者单个元素进行操作。基于元素的id,类,类型,属性,属性值等用于查找或选择HTML元素。选择器都以美元符号开头:$()
1)元素选择器:基于元素名选取。在页面中选取所有的p元素:$(‘p‘)
所有的p元素都隐藏:
<script>
$(function(){
$("#b1012").click(function(){
$("p").hide();
})
})
</script>

2)#id选择器:根据id属性选择元素,id元素应该是唯一的,语法:$("#test")
3).class选择器,通过制定的class查找元素,语法:$(".test")
class=test的元素都被隐藏
<p class="test">p1</p>
<p>p2</p>
<p class="test">p3</p>
<button id="b1012">click</button>
<script>
$(function(){
$("#b1012").click(function(){
$(".test").hide();
})
})

类为test的p元素隐藏,$("p.test").hide();
表格的每一行根据奇偶变色
$("tr:even").css(‘background-color‘,‘yellow‘)
$("tr:odd").css("background-color",‘green‘)

无符号列表的第一个元素隐藏

独立文件中使用jQuary函数,将<scrip></script>放到一个.js文件中
javaScript代码和jQuary代码不能混用,必须使用各自的js文件

jQuary事件,为事件处理特别设计的
事件:面对不同访问者的响应
事件处理程序:当HTML中发生某些事件时所调用的方法
示例:在元素上移动鼠标,选取单选按钮,选取单选按钮,点击元素
常见的DOM事件:
鼠标事件:click,dblclick,mouseenter,mouseleave
键盘事件:keypress,keydown,keyup
表单事件:submit,change,focus,blur
文档/窗口事件:load,resize,scroll,unload

在jQuary中绝大多数DOM事件都有一个等效的jQuary方法
页面中的一个点击事件:
$(‘p‘).click();
什么时间触发事件,可以定义一个事件函数:
$(‘p‘).click(function(){
})

常用的jQuary事件方法:
$(document).ready() -允许在文档加载完后执行函数
click() -当按钮点击事件被触发时调用一个函数
将当前页面的p元素隐藏
$("p").click(function(){
$(this).hide();
})

dblclick() -双击元素时,触发dblclick事件
$("p").dblclick(function(){
$(this).hide();
})

mouseenter() -鼠标穿过元素时,触发mouseenter事件
$("p").mouseenter(function(){
$(this).hide();
})

mouseleave() -鼠标离开元素时,触发mouseleave事件
$("p").mouseleave(function(){
$(this).hide();
})

mousedown() -鼠标移动到元素上方,按下鼠标,触发事件
$("p").mousedown(function(){
$(this).hide();
})

mouseup() -在元素上放松鼠标时,触发事件

hover() -模拟光标悬停事件
focus() -元素获得焦点,触发focus事件
$(‘input‘).focus(function(){
$(this).css(‘background-color‘, ‘red‘)
}

blur() -元素失去焦点时,触发blur事件
$("input").focus(function () {
$(this).css("background-color", ‘blue‘)
})
$("input").blur(function () {
$(this).css(‘background-color‘, ‘white‘)
})

jQuary效果显示
隐藏和显示:隐藏、显示、切换、滑动、淡入淡出、动画
使用hide()和show()隐藏和显示HTML元素
$("#hide").click(function () {
$("p").hide()
})
$("#show").click(function () {
$("p").show()
})
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

toggle() 切换元素的隐藏于显示
$("#hide").click(function () {
$("p").toggle("slow")
})

jQuary的Fading方法,淡入淡出,以下四种方法:
1.fadeIn() 用于淡入已隐藏的元素
$("#fade").click(function () {
$("p").fadeIn("slow")
})

2.fadeOut() 淡出
$("#fade").click(function () {
$("p").fadeOut("slow")
})

3.fadeToggle() 转换
$("#fade").click(function () {
$("p").fadeToggle("slow")
})

4.fadeTo() 允许渐变为给定的不透明度(介于0-1),必须指定speed
$("#fade").click(function () {
$("p").fadeTo("slow", 0.45)
})

jQuary滑动方法,slideDown(),slideUp(),slideToggle()
1.slideDown(),向下滑动;语法:$(selector).slideDown(speed,callback);
$("#fade").click(function () {
$("p").slideDown("slow")
})

2.slideUp(),向上滑动
$("#fade").click(function () {
$("p").slideUp("slow")
})

3.slideToggle(),两者的互换

jQuary动画,animate()用于创建自定义动画
语法:$(selector).animate({params}, speed, callback)
改变元素的透明度,宽度,高度
$("#show").click(function () {
$("#move").animate({ left:‘250px‘,
opacity:‘0.6‘,
height:‘150px‘,
width:‘150px‘})
})

jQuary提供动画的队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");
});

jQuary停止动画,适用于所有的效果函数,滑动、淡入淡出、自定义动画等
$(selector).stop(stopAll,goToEnd);

jQuary callback方法,callback函数在当前动画100%完成后执行
$("p").toggle("slow", function () {
alert("the p is now hidden!")
})

没有回调函数,警告框会在隐藏效果完成前弹出
$("p").toggle("slow",
alert("the p is now hidden!")
)

Channing方法:允许一条语句中有多个jQuary方法,如果需要连接一个动作,只需将这个动作追加到之前的动作上
$(‘#p1‘).css(‘background-color‘,‘red‘).slideDown(2000).slideUp(2000)

时间: 2024-10-11 01:24:44

jQuary 效果的相关文章

jQuary学习の三の效果展示

一.隐藏显示 1.$(selector).hide(speed,callback);2.$(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒. 可选的 callback 参数是隐藏或显示完成后所执行的函数名称. 3.$(selector).toggle(speed,callback);(隐藏显示之间的切换.) 可选的 speed 参数规定隐藏/显示的速度,可

商品详情页,banner滚动点击加载效果,js,jquary

<script language="javascript">       $(document).ready(function () {   //purchase   $("#orderButton").click(function () {   var departure_city_id = $('#departure_city_id').val();   var adult_num = $('#adult').val();   var child_n

html 页面标签转换效果实例

一个HTML的页面标签转换效果,贴出来.供大家参考 先来一张图 如图,页面的左右两边都可以进行切换. 代码很简单,首先需要jquary的js. 主要HTML代码: <div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <ul class="tabs"> <li><a href="#

手风琴案例jquary写法

今天我用jquary来写一下手风琴案例,这个案例在平时的项目中很经常会见到,要想实现效果用jquary来写其实很简单,其实一句话就是jquary的方法的调用. 首先我们先来分析一下手风琴案例实际实现的效果,就是点击当前的标题,它下面的盒子显示出来,而其他的盒子是闭合的状态. 一.先简单的来写下布局: 1 这是html的布局,我用ul和li来实现 2 <ul> 3 <li> 4 <a class="title" href="javascript:v

2018-06-25Js事件流+JQuary基本语法

Js中Dom事件流: 多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为"事件流" 事件对象! 只能在function小括号里写!调用时候不能写! 用匿名函数! Input1.onKeydown=function(evt){ Console.log(evt); } 鼠标移动到设置两个字,弹出4个下拉框:获取两个字的位置,获取鼠标位置,获取四个边的位置,计算位置数据!!! Evt.stoppropag

jquary高级和ajax

jquary高级: 1.动画 1.三种方式显示与隐藏元素 1.默认显示和隐藏的方式 1.show([speed],[easing],[fn]):显示 [speed],[easing],[fn] speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) easing:(Optional) 用来指定切换效果, 默认是"swing",: 可用参数"

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment

TabLayout 一.继承结构 public class TabLayout extends HorizontalScrollView java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.FrameLayout ? android.widget.HorizontalScrollView ? android.support.design.widget.TabLayout 二.TabLayou

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

Android 从无到有打造一个炫酷的进度条效果

从无到有打造一个炫酷的进度条效果