Learning jquery preliminary study notes (b)

Others 2019-08-18 01:24:57 views: null

jQuery Events

jquery is designed as an event handler

What is the event?

Page corresponding to different visitors, called an event.
Refers to an event handler method called by certain events occur in the html
instance:

  • 在元素上移动鼠标
  • 选取单选按钮
  • 点击元素
    Trigger: the process that generated the event, such as clicking a button
    common event dom
Mouse Events Keyboard Events Form events Document / window events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover

jQuery events and grammar

In jquery, most dom events have an equivalent method
page, specify a click event

$("p").click();//指定一个点击事件
//定义触发后的事件
$("p").click(
    function(){
        //动作触发后执行的代码
    }
)

Common events and jQuery method

$(document).read()

$ (Doucument) .read () method allows us to perform a function after the document is fully loaded)

click()

click () method is when a button click event is triggered calls a function, the function when the user clicks the html element of execution

$("p").click(function(){
    $(this).hide();
})

dbclick()

Double-click the time when the elements, dbclick () event will occur.
function when dbclick () method triggers dbclick event or events specified operation occurs dbclick

$("p").dbclick(function(){
    $(this).hide();)
})

mouseenter()

When the mouse across the element when it will trigger mouseenter event
mouseeneter () method triggers mouseenter event

$("#p1").mouseenter(function()
{
    alert("鼠标移动到id="p1"上了")；
})

mouseleave()

When the mouse pointer leaves the element, mouseleave events occur. mouseleave () method mouseleave trigger event, or specified when the function mouseleave run when events occur:

$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });

mousedown()

When the mouse pointer is moved over the element, and the mouse button is pressed, mouseDown event occurs. mousedown () method triggers mousedown event, function or operation of the provisions of the mousedown event occurs when:

$("#p1").mousedown(function(){ alert("鼠标在该段落上按下！"); });

hover()

hover () method for simulating cursor hover event. When the mouse moves over the element, will trigger the first function specified (MouseEnter); when the mouse out of the element, will trigger the second specified function (mouseleave).

$("#p1").hover(
    function(){
        alert("你进入了 p1!"); 
    }
    , 
    function()
    { 
        alert("拜拜! 现在你离开了 p1!"); 
    } );

Note that passed two functions, the first move will trigger a function that will trigger the second function is removed

focus()

When the element gets focus, focus events. When the mouse click on the selected element or elements via navigate to the tab key, the element will focus. focus () method triggers the focus event, function or operation specified event occurs when the focus:

$("input").focus(function(){ $(this).css("background-color","#cccccc"); });

blur()

When the element loses focus, blur event occurs. blur () method triggers the blur event, function or operation specified event occurs when a blur:

$("input").blur(function(){ $(this).css("background-color","#ffffff"); });

Jquery hide / show


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$(".ex .hide").click(function () {
$(this).parents(".ex").hide("slow");
});
});
</script>
<style>
div.ex {
background-color: aquamarine;
padding: 7px;
border: solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>模块1</h3>
<div class="ex">
<button class="hide">点我隐藏</button>
<p>姓名:小明</p><br>
学校:希望小学
</div>
<h3>模块2</h3>
<div class="ex">
<button class="hide">点我隐藏</button>
<p>姓名:小李</p><br>
学校:皮皮小学
</div>
</body>
</html>

jquery's hide () and show ()


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果点击消失我就消失，如果点击出现我就出现</p>
<button id="hide">隐藏</button>
<button id="show">出现</button>
</body>
</html>

grammar

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

speed speed parameter hide / display can take "slow" or "fast" ms or
callback parameter is the name of the function to hide or show the point after the completion of

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
</body>
</html>

About callback function callback ()


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,function(){
alert("Hide 函数已经完成了!");
})
});
});
</script>
<style>
div{
width: 130px;
height:50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
</head>
<body>
<div>
隐藏回调函数
</div>
<button class="hidebtn">
隐藏
</button>
</body>
</html>

jquery toggle()

By jquery, you can use the toggle () method to switch hide () and show () method. Show the hidden elements, and display elements have been hidden.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
})
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>

Call the method $ (Selector) .toggle (Speed, callback)
Speed provides Hide / or speed appears
callback function to call when the provisions of the Hide / appearance

Fade method

fadein () method

Fade has been used to hide elements

  • 语法$(selector).fadein(speed,callback)
  • speed specified length of time fade
  • callback () to fade after the completion of already hidden element
<!-- 淡入效果 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

fadeout method

It used to hide fade visible elements of
syntax : $ (selector) .fadeout (speed , callback)

  • speed defines the fade speed
  • callback is a function to be executed after fading completed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

fadeToggle way

fadeToggle () method can be switched between the fade

  • If the element has faded, the function will add elements fade in effect
  • If the element has fade in, fade out the function will add an element of effect
    Syntax
    $ (Selector) .fadeToggle (Speed, callback)
    Speed is the speed of fade-
    function callback is invoked when done

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle(5000);
$("#div3").fadeToggle("slow");
})
})
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

fadeTo way

jQuery fadeTo () method allows the gradient for a given opacity (a value between 0 and 1).
Syntax:
$ (Selector) .fadeTo (speed, Opacity, the callback);
time necessary to effect speed parameter predetermined length. It can take the following values: "slow", "fast" or milliseconds. fadeTo () method will be necessary in a fade effect opacity parameter is set to a given opacity (a value between 0 and 1). Optional callback parameter is a function name of the function after the completion of the execution. The following example demonstrates fadeTo with different parameters () method:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.45);
$("#div3").fadeTo("slow",0.75);
});
});
</script>
</head>
<body>
<p>演示 fadeTo() 使用不同参数</p>
<button>点我让颜色变淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

jQuery slide

slideDown()

jQuery slideDown () method for the sliding element downwards.

语法:$(selector).slideDown(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds. Optional callback function name parameter is performed after the sliding is completed. The following example demonstrates slideDown () method:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel,#flip{
padding:5px;
text-align: center;
background: green;
border: solid 1px #c3c3c3;
}
#panel{
padding:50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

slideUp

jQuery slideUp () method for a sliding element upward.

语法:$(selector).slideUp(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds. Optional callback function name parameter is performed after the sliding is completed. The following example demonstrates slideUp () method:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

slideToggle

jQuery slideToggle () method.
jQuery slideToggle () method can be switched between slideDown () and slideUp () method. If the element slides downward, the slideToggle () thereof slidably upward. If the element is slid upward, the slideToggle () slidably downwardly thereof.

$(selector).slideToggle(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds. Optional callback function name parameter is performed after the sliding is completed.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>

jquery animation

animate method

animate method for creating custom animations.
Syntax
$(selector).animate({paramas},speed,callback)
Required : params parameter is defined as css animation attributes
Optional:

  • speed is the time to complete the animation
  • callback function is executed after the completion of the implementation of animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"250px"});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

note:

  • All html has a static position and can not be moved
  • To move the position property of the element To css element ralative, fixed, or absolute

Operating a plurality of attributes

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Using a relative value

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:"250px",
height:'+=150px',
width:'+=50px'
})
})
})
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Use predefined value


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:"toggle"
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Use queuing

By default, jQuery provides queuing for animation. This means that if you write more than animate after each other () call, jQuery will create an "internal" queue contains the method call. Then animate these calls one by one run.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("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");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

Guess you like

Origin www.cnblogs.com/mengxiaoleng/p/11369694.html
Recommended
The United States plans to restrict the export of large AI models to China and Russia
Apple to reach agreement with OpenAI to bring ChatGPT to iPhone
Ranking
whisper-webui installation tutorial is silky and easy to use
[Base] Laravel concepts laravel basis, the custom service provider: Contracts, ServiceContainer, ServiceProvider, Facades relations
Import torchvision error problem solving DLL: module not found
observer & watch & notify = pub & sub
A small turntable program [HTML + CSS + JS]
CorelDRAW 2018 shortcuts Daquan
Supervise el botón de menú para lograr un gatillo de presión prolongada
JS将时间秒转换成天小时分钟秒的字符串
RIP basic configuration
[Deleted] solution to a problem a few questions (Noip1994)
Daily
More
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)

Code World

© 2018 codetd.com