Home > Article > Web Front-end > jQuery basic syntax summary

jQuery basic syntax summary

怪我咯Original: 2017-06-27 11:13:361711browse

jQuery syntax:

jQuery syntax is compiled for the selection of HTML elements and can perform certain operations on the elements. This is the key point. Beginners must know what the things you learn are used for.

The basic syntax is: $(selector).action(). All jQuery revolves around this, selecting elements on the page and then performing certain operations on the elements.

Example

$(this).hide() - Hide the current element

Document ready function:

is to prevent jQuery code from running before the document is fully loaded (ready). Due to jQuery's convention, all JavaScript code is best placed here.

$(document).ready(function(){
});

##jQuery Element selectors and attribute selectors: They allow you to select HTML elements by tag name, attribute name or content. Corresponds to the first half of $(selector).action().

jQuery element selector:

$("p") Selects the e388a4556c0f65e1904146cc1a846bee element.

$("p.intro") Selects all e388a4556c0f65e1904146cc1a846bee elements with class="intro".

$("p#demo") Selects all e388a4556c0f65e1904146cc1a846bee elements with id="demo".

jQuery attribute selector:

$("[href]") Select all items with href attribute of the element.

$("[href='#']") Selects all elements with an href value equal to "#".

$("[href!='#']") Selects all elements with an href value not equal to "#".

$("[href$='.jpg']") Selects all elements whose href value ends with ".jpg".

jQuery CSS selector:

$("p").css("background-color","red");

For the complete jquery selector reference manual: http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

jQuery event function: corresponds to the second half of $(selector).action().

Event handlers refer to methods that are called when certain events occur in HTML.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

##Event function$(document).ready(function)$(selector).click(function) $(selector).dblclick(function)$(selector).focus(function)$(selector).mouseover(function)

完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

约定：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

jQuery 效果：对应$(selector).action()的后半部分。

隐藏、显示、切换，滑动，淡入淡出，以及动画

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

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

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$("p#id").show(function(){1000,alert('hello')});

});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
d3259590dd7a1c44081cbc652a12289e显示65281c5ac262bf6d81768915a4a77ac0
c67eb663ef3bebc02acf98265a3b6c6c隐藏65281c5ac262bf6d81768915a4a77ac0
61fff9001bdd35ddad63ed11e0534569这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

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

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a73a95372d4794d0f15522f518a543e9切换65281c5ac262bf6d81768915a4a77ac0
e388a4556c0f65e1904146cc1a846bee这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

jQuery 淡入淡出方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

You can use the animate() method to operate all CSS properties. One important thing to remember: when using animate(), you must use Camel notation to write all property names, for example, You must use paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

It moves the e388a4556c0f65e1904146cc1a846bee element to the left until the left attribute is equal to 250 pixels:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99
8f6a9574ec35bb7d1ed80586ac074f65
$(document).ready(function(){
$("button").click(function(){
$("p") .animate({left:'250px'});
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

< ;body>
bb9345e55eb71822850ff156dfde57c8Start animation65281c5ac262bf6d81768915a4a77ac0
2e00dd0040e8506703822d6805b3e1af
< ;/p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

jQuery provides queue functionality for animations, which means that if you write multiple animate() calls, jQuery creates an "internal" queue containing these method calls. Then run these animate calls one by one.

$("button").click(function(){
var p=$("p");
p.animate({height:'300px',opacity:'0.4 '},"slow");
p.animate({width:'300px',opacity:'0.8'},"slow");
p.animate({height:'100px',opacity: '0.4'},"slow");
p.animate({width:'100px',opacity:'0.8'},"slow");

});

You can use the following format instead

p.animate({height:'300px',opacity:'0.4'},"slow").animate({width:'300px',opacity:'0.8 '},"slow");

##jQuery stop() method is used to stop animations or effects before they are completed. Make a stop.

$(selector).stop(stopAll,goToEnd);

The optional stopAll parameter specifies whether the animation queue should be cleared. The default is false, which only stops active animations, allowing any queued animations to execute backwards.

The optional goToEnd parameter specifies whether to complete the current animation immediately. The default is false.

##8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e
e77e3def01ecc49f4830089c2ebfde692cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("#flip").click(function( ){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){

$(" #panel").stop();
});});
2cacc6d41bbb37262a98f745aa00fbf0

080b747a20f9163200dd0a7d304ba388
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

a7a60cea450f42b2b97b16a5d74b9609Stop sliding65281c5ac262bf6d81768915a4a77ac0
f558f125c0943b004f5cbfcc7dd20fd7Click here to slide the panel down6fb279ad3fd4344cbdd93aac6ad173ac
55a50214d3a0454ac595f64158e13d7eHello world!94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

The Callback function is executed after the current animation is 100% completed.

$(selector).hide(speed,callback)

$("p").hide(1000,function(){

alert("The paragraph is now hidden" );

});

Full animation: http://www.w3school.com.cn/jquery/jquery_ref_effects.asp

jQuery has powerful methods for manipulating HTML elements and attributes.

jQuery DOM operation:

DOM = Document Object Model, "The W3C Document Object Model is a platform- and language-independent interface that allows programs and scripts to dynamically access and update documents. Content, structure and style.”

##Get the value in dom:

三A simple and practical jQuery method for DOM manipulation:

text() - Set or return the text content of the selected element

html () - Sets or returns the content of the selected element (including HTML tags)
val() - Sets or returns the value of the form field
alert("Text: " + $("#test").text());
});
$("#btn2").click (function(){
alert("HTML: " + $("#test").html());
});

$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

$("button").click(function(){
alert($("#w3s").attr("href"));
});

Set DOM value:

$("#btn1").click(function(){
$("#test1") .text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("3b9e3dee4837cc3aa0c6d0b84713e74f");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");

});

The callback function of text(), html() and val(), The callback function consists of two parameters: the selected element The index of the current element in the list, and the original (old) value. Then the return content of the function return is used as the new value.

$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});

$("#btn2").click (function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello a4b561c25d9afb9ac8dc4d70affff419world!07aec8279184d16fedc0638ac18fa96e
(index: " + i + ")";
});

});

$("button").click(function() {
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});

}) ;

Add a new value to the DOM:

append() - Insert content at the end of the selected element
prepend() - Insert content at the beginning of the selected element
after() - Insert content after the selected element
before() - Insert content before the selected element

$("p").append("Some appended text.");

$("p").prepend("Some prepended text.");

$("img").after("Some text after");

$("img").before(" Some text before");

##Delete elements in the DOM:

If you need to delete elements and content, you can generally use the following two jQuery methods:

remove() - delete the selected element (and its children) Element)
empty() - Removes child elements from the selected element

$("#p1").empty();

jQuery remove() method also accepts a parameter, allowing you to delete the element Filter.

This parameter can be any jQuery selector syntax.

##100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

13f74617924f42bfb61a111e3dec0e99 2cacc6d41bbb37262a98f745aa00fbf0

3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("button").click(function(){
$("p" ).remove(".italic");
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeThis is a paragraph in the p.94b3e26ee717c64999d7867364b1b4a3
41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932This is another paragraph in the p.41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932This is another paragraph in the p.72ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3
bb9345e55eb71822850ff156dfde57c8Delete class All p elements with ="italic"65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

##jQuery Manipulating CSS

jQuery has several methods for CSS manipulation. We will learn the following:

addClass() - Adds one or more classes to the selected element

removeClass() - Removes the class from the selected element Select an element to delete one or more classes
toggleClass() - Perform a switching operation of adding/deleting classes to the selected element
css( ) - Sets or returns the style attribute

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e993fa3f474cbb4b6d948eebecb1be5dde4
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p ").addClass("blue");
$("p").addClass("important");
});
});
2cacc6d41bbb37262a98f745aa00fbf0
080b747a20f9163200dd0a7d304ba388
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1Title 1< ;/h1>
c1a436a314ed609750bd7c7d319db4daTitle 22e9b454fa8428549ca2e64dfac4625cd
e388a4556c0f65e1904146cc1a846beeThis is a paragraph. 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeThis is another paragraph. 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeThis is very important text! 94b3e26ee717c64999d7867364b1b4a3
0c6dc11e160d3b678d68754cc175188a
bb9345e55eb71822850ff156dfde57c8Add a class to the element65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

You can also specify multiple classes in the addClass() method:

$("button").click(function(){
$("#p1"). addClass("important blue");
});

jQuery css() method

css () method sets or returns one or more style properties of the selected element.

If you need to return the value of the specified CSS property, please use the following syntax

$("p").css("background-color");

If necessary To set the specified CSS properties, please use the following syntax:

$("p").css("background-color","yellow");

If you need to set multiple CSS properties , please use the following syntax:

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery Handling Element Dimensions:

With jQuery, it is easy to work with elements and browser windows size of.

##width()
height()
innerWidth()
innerHeight()

width() method sets or returns the width of an element (not including padding, borders, or margins ).

The height() method sets or returns the height of an element (not including padding, borders, or margins).

$("button").click(function(){

txt+="Width: " + $("#p1").width() + "0b9f73f8e206867bd1f5dc5957dbcb38";
txt+="Height: " + $("#p1").height();
$("#p1").html(txt);

});

The innerWidth() method returns the width of the element (including padding).

The innerHeight() method returns the height of the element (including padding).

#outerWidth() method returns the width of the element (including padding and borders).

outerHeight() method returns the height of the element (including padding and border).

outerWidth(true) method returns the width of the element (including padding, border, and margins).

outerHeight(true) method returns the height of the element (including padding, border and margin).

The following example sets the width and height of the specified e388a4556c0f65e1904146cc1a846bee element: $("button").click(function (){ $("#p1").width(500).height(500); });

jQuery traversal, which means "move", is used to move based on its relative to other elements. Relationships to "find" (or select) HTML elements. Start with a selection and move along this selection until you reach your desired element.

With jQuery traversal in a family tree, you can start from the selected (current) element and easily move up (ancestors), down (descendants), and horizontally (siblings) in the family tree. ). This movement is called traversing the DOM.

jQuery provides a variety of methods for traversing the DOM. The largest category of traversal methods is tree-traversal.

Traverse up the DOM tree

These jQuery methods are useful for traversing up the DOM tree:

$(document).ready(function(){

});

parents() method returns the selected All of the element's ancestors, all the way up to the document's root element (100db36a723c770d327fc0aef2ce13b1).

You can also use optional parameters to filter the search for ancestor elements.

The following example returns all ancestors of all 45a2772a6b6107b401db3c9b82c049c2 elements that are ff6d136ddc5fdfeffaf53ff6ee95f185 elements:

$(document).ready(function(){
$("span ").parents("ul");
});

parentsUntil() method returns all ancestor elements between two given elements, Neither the beginning nor the end is included.

The following example returns all ancestor elements between the 45a2772a6b6107b401db3c9b82c049c2 and e388a4556c0f65e1904146cc1a846bee elements:

$(document).ready(function(){
$ ("span").parentsUntil("p");
});

Traverse down the DOM tree

Here are two jQuery methods for traversing down the DOM tree:

children()
find()

jQuery children() method

children() method returns all of the selected elements direct child element. This method only traverses the DOM tree one level down.

You can also use optional parameters to filter the search for child elements.

$(document).ready(function(){

$("p").children("p.1"); // The p element with class 1

});

find() method returns the descendant elements of the selected element, all the way down to the last descendant.

The following example returns all 45a2772a6b6107b401db3c9b82c049c2 elements that are descendants of e388a4556c0f65e1904146cc1a846bee:

$(document).ready(function(){
$("p") .find("span");
});

The following example returns all descendants of e388a4556c0f65e1904146cc1a846bee:

$(document).ready(function(){
$("p").find("*");

});

There are many useful methods that allow us to navigate the DOM tree Perform horizontal traversal:

siblings()
next()
##nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

$("h2").siblings("p");
});

$("h2").next();
});

##8b05045a5be5764f313ed5b9168a17e6

93f0f5c25f18dab9d176bd4f6de5d30e
e77e3def01ecc49f4830089c2ebfde69
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("p p").first( ).css("background-color","yellow");
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1Welcome to my homepage473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846bee

e388a4556c0f65e1904146cc1a846beeThis is a paragraph in p. 94b3e26ee717c64999d7867364b1b4a3 of another paragraph. 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

eq() method returns the element with the specified index number among the selected elements. Index numbers start at 0, so the first element has index number 0 instead of 1. The following example selects the second e388a4556c0f65e1904146cc1a846bee element (index 1):

93f0f5c25f18dab9d176bd4f6de5d30e

2cacc6d41bbb37262a98f745aa00fbf0

$(document).ready(function(){
$("p").eq(1).css("background-color","yellow");

2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1Welcome to my homepage473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846beeI am Donald Duck (index 0). 94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeDonald Duck (index 1).

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

The filter() method allows you to specify a criterion. Elements that do not match this criterion are removed from the collection, and matching elements are returned.

##100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("p").filter(".intro").css(" background-color","yellow");
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1Welcome Come to my homepage473f0a7621bec819994bb5020d29372a
e388a4556c0f65e1904146cc1a846beeI am Donald Duck. 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65I live in Duckburg. 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65I love Duckburg. 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeMy best friend is Mickey. 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

Bind function to
Bind the function to the document’s ready event (when the document has finished loading)
Trigger or bind a function to the click event of the selected element
Trigger or bind a function to the double-click event of the selected element
Trigger or bind the function to the focus event of the selected element
Trigger or bind the function Mouseover event bound to the selected element

The above is the detailed content of jQuery basic syntax summary. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Anatomy of JQuery Deferred ObjectNext article：Anatomy of JQuery Deferred Object

See more

jQuery basic syntax summary

jQuery event function: corresponds to the second half of $(selector).action().

jQuery 滑动方法

jQuery 动画 - animate() 方法

jQuery css() method

Traverse down the DOM tree

jQuery children() method

Related articles