jQuery 效果

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',
'150px'})
})

jQuary提供动画的队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({'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)

原文地址:https://www.cnblogs.com/demo-deng/p/7978255.html