unprecedented! Jquery quick notes
01~Foreword
Not long ago, a friend asked me how to learn jQuery quickly, which reminded me of my own experience learning this technology. At that time, the school held a competition, and I had not yet learned jQuery. Later, through efficient learning methods and rapid practice, I mastered the basic application of jQuery in just a few days. As I continued to expand my knowledge, I also entered the field in this field. Improving constantly. Today, I will share my study notes, hoping to provide some reference and help for those friends who want to quickly master jQuery skills.
02~Basic selector
introduce
1: ID selector, name: #id, example: $("#testDiv"), selects the element with id testDiv. (When IDs are repeated, the first one will be selected)
2: Class selector, name: .class, for example: $(".testDiv"), select the element whose class is testDiv.
3: Tag selector, name: element, example: $("div"), selects all divs.
4: Wildcard selector, name: *, example: $("*"), selects all elements on the page.
5: Combine selectors, name: selector1, selector2, selector3, example: $("#testDiv,.blue,span"), select elements matching multiple selectors at the same time
Code display
HTML5
<div id="testDiv" class="blue">我是第一个div，<span>我是第一个div里的span</span></div>
<div class="blue">我是第二个div</div>
<span id="testDiv">我是span</span>
Javascript
// 输出id为 testDiv 的元素集
console.log($("#testDiv"));
// 输出所有类叫 blue的
console.log($(".blue"));
// 输出所有div与所有span
console.log($('div'));
console.log($('span'));
// 输出页面所有元素
console.log($('*'));
console.log('-------------------------------------');
// 将dom对象转化为jquery对象
var testDiv = document.querySelector('div#testDiv');
console.log('将dom对象转化为jquery对象');
console.log('转化前：');
console.log(testDiv);
console.log('转化后：');
console.log($(testDiv));
// 将jquery对象转化为dom对象
var testDiv2 = $('#testDiv');
console.log('将jquery对象转化为dom对象');
console.log('转化前：');
console.log(testDiv2);
console.log('转化后：');
console.log($(testDiv2)[0]);
03~Level selector
introduce
1: Descendant selector, name: div p, example: $('#myDiv p'), get all p tags in div
2: Descendant selector, Name: div >p, example: $('#myDiv >p'), get all the sub-elements under the div that are p tags (excluding grandchild elements, etc.).
3: Adjacent selector, name: div +p, example: $(‘#myDiv +p’), get the next p element of the div, if there is none, it cannot be obtained.
4: Peer selector, name: div ~p, example: $(‘#myDiv ~p’), selects all p tags under the div, and the ones above cannot be obtained.
Code display
HTML5
<div id="myDiv">
<div>
<p>myDiv >div p1</p>
<p>myDiv >div p1</p>
</div>
<p>myDiv >p</p>
<p>myDiv >p</p>
</div>
<span class="k">k</span>
<p class="a">a</p>
<p class="b">b</p>
<span class="o">o</span>
Javascript
// 获取id#myDiv中后代是p的所有元素
var myDivP = $('#myDiv p');
console.log('获取id#myDiv中后代是p的所有元素：');
console.log(myDivP);
console.log('--------------------------------------------------------------');
// 获取id#myDiv中所有子代为p的元素
console.log('获取id#myDiv中子代是p的所有元素：');
console.log($('#myDiv >p'));
console.log('--------------------------------------------------------------');
// 获取id#myDiv的相邻p元素
console.log('获取id#myDiv的相邻span元素：');
console.log($('#myDiv +span'));
console.log('--------------------------------------------------------------');
// 获取id#myDiv后的的所有同辈元素
console.log('获取id#myDiv后的的所有同辈元素：');
console.log($('#myDiv ~p'));
04~Form Selector
introduce
1: Form control selector, name: :input, finds all input control elements, $(‘:input’), will match all input, button, select, textarea.
2: Text box selector, name::text, finds all text box elements, $(‘:text’).
3: Password box selector, name::password, find all password boxes, $(‘:password’).
4: Radio button selector, name::radio, find all radio buttons, $(":radio").
5: Checkbox selector, name::checkbox, find all checkboxes, $(‘:checkbox’).
6: Submit button selector, name: :submit, find all submit buttons, $(':submit'), including input:button, button, input:submit
7: Image field selector, name: :image, find all image fields, $(':image').
8: Reset button selector, name::reset, find all reset buttons, $(‘:reset’).
9: Button selector, name: :button, find all buttons, $(‘:button’), including input:button, button.
10: File domain selector, name: :file, search all file domains, $(‘:file’).
Code display
HTML5
<div class="cls1">
<form action="#" method="get">
<input type="text"><br />
<input type="password">
<select>
<option>123</option>
<option>456</option>
<option>789</option>
<option>011</option>
</select>
<textarea cols="30" rows="10"></textarea>
<div>
<input type="radio" name="cls1radiuo">
<input type="radio" name="cls1radiuo">
<input type="radio" name="cls1radiuo">
<input type="radio" name="cls1radiuo">
</div>
<div>
<input type="checkbox" name="cls1checkbox">
<input type="checkbox" name="cls1checkbox">
<input type="checkbox" name="cls1checkbox">
<input type="checkbox" name="cls1checkbox">
</div>
<button>普通按钮1</button>
<button>普通按钮2</button>
<input type="button" value="input按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<input type="file">
</form>
</div>
<div class="cls2">
<form action="#" method="get">
<input type="text"><br />
<input type="password">
<select>
<option>123</option>
<option>456</option>
<option>789</option>
<option>011</option>
</select>
<textarea cols="30" rows="10"></textarea>
<div>
<input type="radio" name="cls2radiuo">
<input type="radio" name="cls2radiuo">
<input type="radio" name="cls2radiuo">
<input type="radio" name="cls2radiuo">
</div>
<div>
<input type="checkbox" name="cls2checkbox">
<input type="checkbox" name="cls2checkbox">
<input type="checkbox" name="cls2checkbox">
<input type="checkbox" name="cls2checkbox">
</div>
<button>普通按钮1</button>
<button>普通按钮2</button>
<input type="button" value="input按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<input type="file">
</form>
</div>
Javascript
// 获取页面所有的表单控件
console.log('获取页面所有的表单控件：');
console.log($(':input'));
console.log('----------------------------------------------------------');
// 获取页面所有文本框
console.log('获取页面所有文本框：');
console.log($(':text'));
console.log('----------------------------------------------------------');
// 获取页面所有密码框
console.log('获取页面所有密码框：');
console.log($(':password'))
console.log('----------------------------------------------------------')
// 获取页面所有单选按钮与复选钮
console.log('获取页面所有单选按钮与复选钮');
console.log($(':radio'));
console.log($(':checkbox'))
console.log('----------------------------------------------------------')
// 获取页面所有的按钮
console.log('获取页面所有的按钮：');
console.log($(':button'))
console.log('----------------------------------------------------------')
// 获取页面所有的提交按钮
console.log('获取页面所有的提交按钮：');
console.log($(':submit'))
console.log('----------------------------------------------------------')
// 获取页面所有的重置按钮
console.log('获取页面所有的重置按钮：');
console.log($(':reset'))
console.log('----------------------------------------------------------')
// 获取页面所有的文件域
console.log('获取页面所有的文件域：');
console.log($(':file'))
console.log('----------------------------------------------------------')
// 选择类为cls1的div中的所有按钮
console.log('选择类为cls1的div中的所有按钮：');
console.log($('.cls1 :button'))
console.log('----------------------------------------------------------')
// 选择类为cls2的div中的所有复选框
console.log('选择类为cls2的div中的所有复选框');
console.log($('.cls2 :checkbox'));
05~Manipulate the attributes of elements
introduce
1: Get attributes
(1). attr (attribute name), get the specified attribute value. When operating the checkbox, if it is selected, it returns checked, if not, it returns undefined. Example: $(‘checked’), $(‘name’).
(2). prop (property name), obtains the attribute value with two attributes: true and false.
[Note]:
1): If the element attribute is customized, attr() can get it, but prop() cannot (undefined) .
2): If it is the case of element [attribute name = attribute value], attr() gets the attribute name, and prop() gets true and false.
3): When the element is [attribute name = attribute value], the attribute value can be omitted. If the attribute value is not written, attr() will get a null value, and prop() still gets true and false.
2: Set attributes
1). attr('attribute name','attribute value')
2). prop ('Attribute name', 'Attribute value')
[Note]:
1): attr() can set custom attributes, but prop() cannot Set custom attributes
3: Remove attributes
1). removeAttr(), usage: $('#radio').removeAttr('checked')
Code display
HTML5
<input type="radio" checked id="a" abc="abc" class="che">
<input type="checkbox" checked="checked" id="b" class="che">
<div id="c" contenteditable></div>
<input type="checkbox" id="d">
<input type="checkbox" id="e">
Javascript
// 获取两个控件的属性以及属性值
console.log('获取两个控件的属性以及属性值(attr)：');
console.log($('#b').attr('checked'));
console.log($('#a').attr('abc'));
console.log($('#a').attr('class'));
console.log('获取两个控件的属性以及属性值(prop)：');
console.log($('#b').prop('checked'));
console.log($('#a').prop('abc'));
console.log($('#a').prop('class'));
console.log('用两种方法获取div的contenteditable值(1attr，2prop)：');
console.log($('#c').attr('contenteditable'));
console.log($('#c').prop('contenteditable'));
// 设置控件的属性以及属性值
$('#d').attr('checked',true);
$('#e').prop('checked',true);
console.log('#d与#e 的 checked：');
console.log($('#d').attr('checked'));
console.log($('#e').prop('checked'));
$('#d').attr('value','1');
$('#e').attr('value','2');
console.log('#d与#e 的 value：');
console.log($('#d').prop('value'));
console.log($('#e').prop('value'));
$('#d').attr('zidingyi','jiale');
$('#e').prop('zidingyi','jiale');
console.log('attr()与prop()设置自定义属性值：');
console.log($('#d').prop('zidingyi'));
console.log($('#e').prop('zidingyi'));
// 移除 #d 的checked属性
// $('#d').removeAttr('checked');
console.log('移除 #d 的checked属性：');
console.log($('#d'));
06~Manipulate the style of elements
introduce
-
1：attr()
- attr(‘class’), gets the class attribute value of the element.
- attr('class','style name'), sets the class of the element. 2：addClass()与removeClass()
- addClass(‘Add class’), add style name.
- removeClass(‘style name’), removes the style. 3: css(), add specific styles. What is added is inline style, which has high priority.
- css(‘property’, ‘property value’): Set a single.
- css({‘Attribute 01’: ‘Attribute value 01’, ‘Attribute 02’: ‘Attribute value 02’…})
Code display
CSS3
.test01 {
width: 400px;
height: 170px;
background-color: red;
}
.test02 {
width: 400px;
height: 400px;
border: solid 4px blue;
box-sizing: border-box;
transition: background-color .2s;
}
.test02:hover {
background-color: green;
}
.test03 {
width: 30px;
height: 30px;
border: dotted 1px red;
background-color: antiquewhite;
}
.test03::after {
content: 'test03';
}
HTML5
<div>第一个</div>
<div>第二个</div>
<button id="btn">变化</button>
Javascript
var div01 = $('body div:nth-of-type(1)');
var div02 = $('body div:nth-of-type(2)');
// 获取第一个div的class值
console.log(div01.attr('class'));
btn.addEventListener('click',function() {
// 将第一个div的class改为test01
div01.attr('class','test01')
// 将第二个div的class改为test02
div02.attr('class','test02');
// 给第二个div再添加一个test01的样式
div02.addClass('test01');
// 给第二个div再添加一个test03的样式
div02.addClass('test03');
// 删除第二个div的test01、test03的样式
div02.removeClass('test03');
div02.removeClass('test01');
// 设置第一个div宽度为100%
div01.css('width','100%');
// 设置第二个div宽度为1000px, 背景色pink，字体颜色是白色
div02.css({
'width':'1000px','background-color':'pink','color':'white'});
});
07~Content of operating elements
introduce
1: html(), get the content of the element, including HTML tags (non-form elements)
2: html('content'), set the content of the element, including HTML tags (non-form element)
3: text(), obtains the plain text content of the element, does not recognize HTML tags (non-form element)
4: text(' Content'), sets the plain text content of the element, does not recognize HTML tags (non-form elements)
5: val(), gets the value of the element (form element)
6: val('value'), set the value of the element (form element)
Code display
HTML5
<form action="#" method="get">
<input type="text" value="op" id="int1">
<input type="password" id="int2">
</form>
<div class="div01"><mark>div01</mark></div>
<div class="div02"><mark>div02</mark></div>
<div class="div03"><mark>div03</mark></div>
Javascript
var div01 = $('.div01');
var div02 = $('.div02');
var div03 = $('.div03');
// 输出div01中的内容
console.log('html()：'+div01.html());
console.log('text()：'+div01.text());
// 设置div02、div03中的内容是jiale
div02.html('<font color="red">他奶奶的</font>');
div03.text('<font color="red">他爷爷的</font>');
// 获取文本框的值
console.log($('#int1').val());
// 设置文本框值为jiale
$('#int1').val('jiale');
// 设置密码框值为0215song
$('#int2').val('0215song');
console.log($('#int2').val());
08~Create and add elements
introduce
1: prepend(content): Insert elements or content at the beginning of the selected element. The appended content parameter can be characters, HTML tags, or jquery objects. (Father and son)
2: $(‘content’).prependTo(selector): Add the content element or content, jquery object to the beginning of the selector. (Father and son)
3: append(content): Insert elements or content at the end of the selected element. The appended content parameter can be characters, HTML tags, or jquery objects. (Father and son)
4: $(‘content’).appendTo(selector): Add the content element or content, jquery object to the end of the selector. (Father and Son)
5: before(): Insert the specified element or content before the element. (Brothers) Example: $(‘selector’).before(content)
6: $(‘content’).insertBefore(selector), insert content before an element. (Brother)
7: after(): Insert the specified element or content after the element. (Brothers) Example: $(‘selector’).after(content)
8: $(‘content’).insertAfter(selector), insert content after an element. (Brother)
[Note]:
Insert the jquery object in the page into an element, and the jquery object originally represented will disappear.
Code display
HTML5
<b id="b1">我是b1标记</b>
<b id="b2">我是b2标记</b>
<div class="div01">我是div01</div>
<div class="div02">我是div02</div>
Javascript
var div01 = $('.div01');
var div02 = $('.div02');
// 在div01前边添加个mark标记
div01.prepend('<mark>mark标记</mark>');
// 在div01前边添加个b标记
$('#b1').prependTo(div01);
// 在div02后边添加个mark标记
div02.append('<mark>mark标记</mark>');
// 在div02后边添加个b标记
$("#b2").appendTo(div02);
// 在div01前创建个div.div0-5的元素
// div01.before('<div class="div0-5">div0.5</div>');
$('<div class="div0-5">div0.5</div>').insertBefore(div01);
// 在div01前创建个div.div1-5的元素
// div01.after('<div class="div1-5">div1.5</div>');
$('<div class="div1-5">div1.5</div>').insertAfter(div01);
/**
* 1：字符串无法通过prependTo()或appendTo()、insertBefore()、insertAfter()方法直接插入，必须先转化为jquery对象。
* 2：var span = '<span>我是span标记</span>';
* $(span).appendTo(selector);
*/
09~Delete and traverse elements
introduce
-
1: Delete element
-
- remove(): Delete the element and its corresponding sub-elements, and delete the tag and content together. Usage: Specify element.remove();
-
- empty(): Clear the element content and save the tag, but not the subtags. Usage: Specify element.empty();
-
- [Note]: After the element is deleted, the original jquery object remains unchanged and will not disappear when the element on the page disappears.
2: Traverse elements
-
- each()
Syntax: $(selector).each(function(index,element));
The parameter function is the callback during traversal Function; index is the sequence number of the traversed element, starting from 0; element is the current element, which is the dom element at this time.
- each()
-
- for()
Syntax: for(var i = 0;i < $(selector).length;i++) {}
Get is also a dom element.
- for()
Code display
HTML
<div class="div01">我是div01，<mark>div01里面的mark</mark></div>
<div class="div02">我是div02，<mark>div02里面的mark</mark></div>
<ul>
<li class="lis">li1</li>
<li class="lis">li2</li>
<li class="lis">li3</li>
<li class="lis">li4</li>
<li class="lis">li5</li>
<li class="lis">li6</li>
</ul>
Javascript
var div01 = $('.div01');
var div02 = $('.div02');
// 使用remove()方法删除div01
div01.remove();
console.log(div01);
// 使用empty()方法删除div02
div02.empty();
console.log(div02);
// 将div01添加到div02
div01.appendTo(div02);
// 获取所有li，遍历
var lis = $('ul >li');
console.log('使用 for 循环：');
for(var i = 0;i < lis.length;i++) {
console.log(lis[i]); console.log($(lis[i])); } console.log('使用 each：');
lis.each(function(i,ele){
console.log(i,ele); console.log($(ele)); });
10~Events
introduce
- ready event (preloading event)
1). Executed when the DOM structure of the page is loaded, similar to the load event.
2). Syntax: $(document).ready(function(){ //code}); Abbreviation: $(function(){ // Code});
3). You can write multiple ready events, and js is executed from top to bottom, so the top one is executed first. - bind() binding event
1). Add one or more event handlers to the selected element and specify the function to run when the event occurs.
2). Syntax:
$(selector).bind(eventType [, eventDate] , handler());
eventType: a string type event type, which is the event to be bound
eventDate: passed parameters, format {name: value, name: value}
handler: function triggered by event - Bind a single event
1). $(selector).bind('click',function() { //code block});
2). $(selector).Event name(function(){ //code block}); - Bind multiple events
1). Bind multiple events to a function
$(selector).bind('Event 1, Event 2', function() { //code block});
2). Bind multiple events to the element and set the corresponding function
$ (selector).bind('Event type',function(){ }).bind(‘Event type’, function(){ }) 3). Bind multiple events to the element and set the corresponding function $(selector). bind({ 'Event type': function() {}, 'Event type': function() {} }) ; 4). $(selector).Event name(function() { // Code block }).Event name(function(){ // Code block });
Code display
HTML5
<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
<button id="btn03">btn03</button>
<button id="btn04">btn04</button>
<button id="btn05">btn05</button>
<button id="btn06">btn06</button>
Javascript
// 点击btn01, btn02获取内容
$(btn01).bind('click', function () {
console.log($(this).text());
});
$(btn02).click(function () {
console.log($(this).text());
});
// 点击、鼠标移开、鼠标进入在控制台输出btn03操作
$(btn03).bind('click mouseover mouseout', function () {
console.log($(this).text());
});
// 点击、鼠标移开、进入分别输出对应的事件（btn04）
$(btn04).bind('click', function () {
console.log($(this).text() + '：点击');
}).bind('mouseover', function () {
console.log($(this).text() + '：鼠标进入');
}).bind('mouseout', function () {
console.log($(this).text() + '：鼠标出去');
});
// 点击、鼠标移开、进入分别输出对应的事件（btn05）
$(btn05).bind({
'click' : function() {
console.log($(this).text()+'：鼠标点击');
},
'mouseover' : function() {
console.log($(this).text()+'：鼠标进入');
},
'mouseout' : function() {
console.log($(this).text()+'：鼠标出去');
}
});
// 点击、鼠标移开、进入分别输出对应的事件（btn06）
$(btn06).click(function() {
console.log($(this).text()+'：鼠标点击');
}).mouseover(function(){
console.log($(this).text()+'：鼠标进入');
}).mouseout(function() {
console.log($(this).text()+'：鼠标出去');
});
11~JQuery Ajax
$.ajax() introduction
Format: $.ajax({ });
Parameters:
1. type: Request method GET/POST
2. url: request address url
3. async: whether asynchronous, default true async
4. data: data sent to the server 8. error: This function is called when the request fails 7. success: call this when the request is successful Function 6. contentType: set the request header
5. dataType: the data type expected to be returned by the server
$.ajax() code display
index.html
<input type="text" class="username">
<input type="password" class="passwd">
<button class="submit01">get请求</button>
<button class="submit02">post请求</button>
<script>
var submitBtn01 = $('.submit01');
var submitBtn02 = $('.submit02');
// ajax get请求
submitBtn01.click(function () {
var un = $('.username').val();
var pw = $('.passwd').val();
if (un && pw) {
$.ajax({
type: 'get',
url: 'get.php?username=' + un + '&passwd=' + pw,
success: function (data) {
alert(data);
}
});
} else alert('请将信息填写完整！');
});
// ajax get请求
submitBtn02.click(function () {
var un = $('.username').val();
var pw = $('.passwd').val();
if (un && pw) {
$.ajax({
type: 'post',
url: 'post.php',
// data使post请求独有的字段，用来存放post的数据，格式为json
data: {
'username': un,
'passwd': pw
},
success: function (data) {
alert(data);
}
});
} else alert('请将信息填写完整！');
});
</script>
get.php
<?php
$name = 'jiale';
$passwd = '0215song';
$usName = $_GET['username'];
$usPasswd = $_GET['passwd'];
if($usName == $name) {
if($usPasswd == $passwd) {
echo '登录成功！';
} else echo '密码不正确！';
} else {
echo '用户名不正确！';}
?>
post.php
<?php
$name = 'jiale';
$passwd = '0215song';
$usName = $_POST['username'];
$usPasswd = $_POST['passwd'];
if($usName == $name) {
if($usPasswd == $passwd) {
echo '登录成功！';
} else echo '密码不正确！';
} else {
echo '用户名不正确！';}
?>
$.get() / $.post() Introduction
- $.get()
This is a simple GET request function to replace the complex $.ajax()
Can be called when the request is successful Callback function, if you need to execute the function when an error occurs, please use $.ajax()
Format: $.get('url',data,function(data,statu,xhr){},dataType );
url: requested address
data: requested data, in the form of json object
function(data,status, xhr): Request a function that runs successfully
data: Contains the result data from the request
status: Contains the status of the request (success, notmodified, error, timeout, parsererror )
xhr: Contains the xmlHttpRequest object
dataType: Specifies the expected server data type- $.post()
This is a simple POST request function to replace the complex $.ajax()
It can be called when the request is successful Callback function, if you need to execute the function when an error occurs, please use $.ajax()
Format: $.post('url',data,function(data,statu,xhr){},dataType );
url: requested address
data: requested data, in the form of json object
function(data,status, xhr): Request a function that runs successfully
data: Contains the result data from the request
status: Contains the status of the request (success, notmodified, error, timeout, parsererror )
xhr: Contains the xmlHttpRequest object
dataType: Specifies the expected server data type
$.get() / $.post() code display
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$.get()与$.post()</title>
<script src="./script/jquery.min.js"></script>
</head>
<body>
<input type="text" id="un">
<input type="password" id="pw">
<button class="getRes">get</button>
<button class="postRes">post</button>
<script>
// get
$('.getRes').click(function () {
var un = $('#un').val();
if (un) {
$.get('$_get.php', {
username: un, passwd: '0215song' }, function (data, status, xhr) {
alert(data);
console.log(status);
console.log(xhr);
});
} else alert('请将数据填写完整！');
});
// post
$('.postRes').click(function () {
var pw = $('#pw').val();
if (pw) {
$.post('$_post.php', {
password: pw }, function (data, status, xhr) {
alert(data);
console.log(status);
console.log(xhr);
})
} else alert('请将数据填写完整！');
});
</script>
</body>
</html>
get.php
<?php
$username = 'jiale';
$un = $_GET['username'];
if($username == $un) {
echo '登录成功！';
} else echo '爬！';
?>
post.php
<?php
$pw = '02150215';
$passwd = $_POST['password'];
if($pw == $passwd) {
echo '密码正确！';
} else echo '密码错误！';
?>
12~Expand
- $.trim()
Removes the spaces before and after the string, but does not change the original string. - $.isArrray()
Detects whether the object is an array, and the page element set (jquery object) obtained is not an array. - $.isFunction()
Check whether the object is a function. - $(selector).toArray()
Restore all DOM elements in the jquery collection into an array
Format: $(selector).toArray (); - $(selector).hasClass(clsName)
Determine whether an element has this class, if true, if not false - $(selector).toggleClass(‘clsName’)
Determine whether an element has this class, negate the operation - Element size operations
width(): Get the value of the width of the content element
height(): Get the value of the height of the content element.
innerWidth(): Get the value of width+padding of the content element.
innerHeight(): Get the value of height+padding of the content element.
outerWidth(false/true): Get the value of width+padding+border of the content element, if it is true plus the value of margin.
outerHeight(false/true), get the value of height+padding+border of the content element, if it is true plus the value of margin. - Offset of element
$(selector).offset(): relative to the coordinates of the upper left corner of the page, returns a {top: y,left: x} object.
$(selector).position(): relative to the coordinates of the upper left corner of the parent element, returns a {top: y,left: x} object. - Scroll bar operation
$(selector).scrollTop() / $(selector).scrollLeft(), get the vertical/horizontal scroll bar of the element
$(selector).scrollTop( i ) / $(selector).scrollLeft( i ), set the vertical/horizontal scroll bar of the element - replaceWith()/replaceAll()
Replaces all matching elements in the collection with the provided content and returns the collection of removed elements.
Format:
$(selector).replaceWith($('<mark>m</mark>'))
$('<mark>m</mark>').replaceAll($(selector)) - $(selector).parent(): Get the parent element of the element
$(selector).children(): Get the child elements of the element - $(selector).hide() / $(selector).show() / $(selector).toggle()
Hide the corresponding element/show the corresponding element/reverse operate.
fadeIn()/fadeOut()/fadeGoogle()
Fade in/out of the show/hide element.
slideIn()/slideOut()/slideToggle()
Slide in/out the show/hide element.
13~End
In addition to the powerful functions of JQuery itself, there are many excellent plug-ins that allow you to better realize various needs. For example, JQuery Cookie, JQuery Growl, etc., as well as the highly respected JQuery UI, the use of these plug-ins can bring great convenience to your development work. Of course, I won’t introduce them in detail here. As long as you master these skills, I believe you can easily achieve many amazing effects.
Thank you very much for your patience in reading, I hope these contents are enlightening and helpful to you. If you have any questions or need further discussion, please feel free to communicate with me at any time. Thank you for your support and trust, and I wish you greater success in your future work or study!