jQuary 效果

Posted 2020-10-16 今夜无风

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)