Getting Started with jquery

Introduction to jquery

jquery is currently the most widely used JavaScript library of functions. According to statistics, the world's top 1 million sites, 46% use jquery, far more than other libraries. Microsoft even took jquery as their official repository.

jquery version is divided into 1.x series and 2.x, 3.x series, 1.x series compatible with the lower version of the browser, 2.x, 3.x series to abandon the support of low-version browser, currently using the most is the 1.x series.

jquery is a function library, a JS file, the page with a script tag introduced to this JS file can be used.

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery's slogan and wishes write less, does more (write little, do much)

1, http://jquery.com/official website
2, https://code.jquery.com/version download

jquery document is loaded and executed

The statement that gets the element is written to the head of the page, because the element has not yet loaded and error, JQuery provides the Ready method to solve the problem, it is faster than the native window.onload.

<script type="text/javascript">$(document).ready(function(){     ......});</script>

can be abbreviated as:

<script type="text/javascript">$(function(){     ......});</script>

jquery Selector

jquery usage Thought one
Select a page element, and then do something about it

jquery Selector
The jquery selector can quickly select elements, select Rules and CSS styles the same, and use the length property to determine whether or not to choose success.

$(‘#myId‘) //选择id为myId的网页元素$(‘.myClass‘) // 选择class为myClass的元素$(‘li‘) //选择所有的li元素$(‘#ul1 li span‘) //选择id为为ul1元素下的所有li下的span元素$(‘input[name=first]‘) // 选择name属性等于first的input元素

Filtering the selection set

$(‘div‘).has(‘p‘); // 选择包含p元素的div元素$(‘div‘).not(‘.myClass‘); //选择class不等于myClass的div元素$(‘div‘).eq(5); //选择第6个div元素

Select Set Transfer

$(‘#box‘).prev(); //选择id是box的元素前面紧挨的同辈元素$(‘#box‘).prevAll(); //选择id是box的元素之前所有的同辈元素$(‘#box‘).next(); //选择id是box的元素后面紧挨的同辈元素$(‘#box‘).nextAll(); //选择id是box的元素后面所有的同辈元素$(‘#box‘).parent(); //选择id是box的元素的父元素$(‘#box‘).children(); //选择id是box的元素的所有子元素$(‘#box‘).siblings(); //选择id是box的元素的同级元素$(‘#box‘).find(‘.myClass‘); //选择id是box的元素内的class等于myClass的元素

Decide whether to select an element
jquery has a fault-tolerant mechanism, even if the element is not found, there is no error, you can use the Length property to determine whether the element is found, length equals 0, is not selected to the element, length is greater than 0, is the selection to the element.

var $div1 = $(‘#div1‘);var $div2 = $(‘#div2‘);alert($div1.length); // 弹出1alert($div2.length); // 弹出0......<div id="div1">这是一个div</div>

jquery style operations

jquery usage thought two
The same function completes the value and assignment

Action inline style

// 获取div的样式$("div").css("width");$("div").css("color");//设置div的样式$("div").css("width","30px");$("div").css("height","30px");$("div").css({fontSize:"30px",color:"red"});

Special attention
The selector obtains more than one element, obtaining the information obtained by the first, for example: $ ("div"). CSS ("width"), gets the width of the first Div.

Action Style class name

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式$("#div1").removeClass("divClass divClass2") //移除多个样式$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

Bind Click event

To bind a click event to an element, you can use the following method:

$(‘#btn1‘).click(function(){    // 内部的this指的是原生对象    // 使用jquery对象用 $(this)})

Gets the index value of the element
Sometimes you need to get the index position of the matched element relative to its sibling, which can be obtained by using the index () method.

var $li = $(‘.list li‘).eq(1);alert($li.index()); // 弹出1......<ul class="list">    <li>1</li>    <li>2</li>    <li>4</li>    <li>5</li>    <li>6</li></ul>
jquery Version of the tab

<! DOCTYPE html>jquery animations
Animate methods enable you to animate a property value on an element, set one or more property values, and execute a function when the animation finishes executing.
/*    animate参数：    参数一：要改变的样式属性值，写成字典的形式    参数二：动画持续的时间，单位为毫秒，一般不写单位    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动    参数四：动画回调函数，动画完成后执行的匿名函数*/$(‘#div1‘).animate({    width:300,    height:300},1000,‘swing‘,function(){    alert(‘done!‘);});


jquery Special Effects
fadeIn() 淡入    $btn.click(function(){        $(‘#div1‘).fadeIn(1000,‘swing‘,function(){            alert(‘done!‘);        });    });fadeOut() 淡出fadeToggle() 切换淡入淡出hide() 隐藏元素show() 显示元素toggle() 切换元素的可见状态slideDown() 向下展开slideUp() 向上卷起slideToggle() 依次展开或卷起某个元素

jquery Chained calls
The method of the jquery object returns the JQuery object after execution, and the methods of all jquery objects can be linked to write:
  $ (' #div1 ')//element with ID div1. Children (' ul ')///The element below the UL sub-element. Slidedown (' fast ')//height from zero to actual height to display the UL element. Parent ()//  Jumps to the parent element of UL, which is the element with ID div1. Siblings ()//jumps to all sibling elements of the DIV1 element. Children (' ul ')//The UL child elements in these sibling elements. Slideup (' fast '); High actual height transform to zero hidden UL element  
 
 Hierarchy Menu 
<! DOCTYPE html>jquery Property Operations
1. HTML () Remove or set HTML content
// 取出html内容var $htm = $(‘#div1‘).html();// 设置html内容$(‘#div1‘).html(‘<span>添加文字</span>‘);
2, prop () remove or set the value of a property
// 取出图片的地址var $src = $(‘#img1‘).prop(‘src‘);// 设置图片的地址和alt属性$(‘#img1‘).prop({src: "test.jpg", alt: "Test Image" });

Chat dialog Box Instance

<! DOCTYPE html>jquery Events
List of event functions:
blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave事件指定处理函数ready() DOM加载完成submit() 用户递交表单

Single verification
1. What is a regular expression:
A string matching rule that allows the computer to read.
2, the regular expression of the wording:
var re=new RegExp (' Rules ', ' optional Parameters ');
var re=/rules/Parameters;
3. Characters in the rule
1) normal character matching:
such as:/a/matches the character ' A ',/a,b/matches the character ' A, B '
2) escape character matching:
\d matches a number, which is 0-9
\d matches a non-numeric, that is, in addition to 0-9
\w match a word character (letter, number, underline)
\w matches any non-word character. equivalent to [^a-za-z0-9_]
\s matches a white space character
\s matches a non-whitespace character
\b Match word boundaries
\b Matching non-word boundaries
. Match an arbitrary character
var sTr01 = ‘123456asdf‘;var re01 = /\d+/;//匹配纯数字字符串var re02 = /^\d+$/;alert(re01.test(sTr01)); //弹出truealert(re02.test(sTr01)); //弹出false
4. Quantifier: Define the number of matching characters on the left
? Occurs 0 or more times (up to one time)
+ appears one or more times (at least once)
* appears 0 or more times (any time)
{n} appears n times
{N,m} appears n to M times
{N,} appears at least n times
5. Any one or range
[abc123]: matches any one of the characters in ' abc123 '
[a-z0-9]: matches any one character from A to Z or 0 to 9
6. Limit the opening end
^ with close to the element beginning
$ close to the end of an element
7. Modification Parameters:
G:global, full text search, default search to first result stop
I:ingore case, ignoring casing, default case sensitivity
8. Common functions
Test
Usage: Regular. Test (string) match succeeds, returns true, otherwise returns false
Regular default rules
The match succeeds to the end, does not continue the match, is case-sensitive
Common regular Rules
//用户名验证：(数字字母或下划线6到20位)var reUser = /^\w{6,20}$/;//邮箱验证：        var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;//密码验证：var rePass = /^[\[email protected]#$%^&*]{6,20}$/;//手机号码验证：var rePhone = /^1[34578]\d{9}$/;

Form Registration Instance
$ (function () {var error_name = True;var Error_pwd = True;var Error_check_pwd = True;var Error_email = True;var Error_check   = false;   var $name = $ (' #user_name ');   var $pwd = $ (' #pwd ');   var $cpwd = $ (' #cpwd ');   var $email = $ (' #email '); var $allow = $ (' #allow '); $name. blur (function () {check_user_name ();}). Click (function () {$ (this). Next (). hide ();}); $pwd. blur (function () {check_pwd ();}). Click (function () {$ (this). Next (). hide ();}); $cpwd. blur (function () {check_cpwd ();}). Click (function () {$ (this). Next (). hide ();}); $email. blur (function () {check_email ();}). Click (function () {$ (this). Next (). hide ();}); $allow. Click (function () {if ($ (this). are (': Checked ')) {Error_check = false;$ (this). Siblings (' span '). Hide ();} Else{error_check = true;$ (this). Siblings (' span '). HTML (' Please tick consent '); $ (this). Siblings (' span '). Show ();}); function Check_user_name () {//numeric letter or underscore var reg =/^\w{6,15}$/;var val = $name. val (); if (val== ") {$name. Next (). HTML (' The user name cannot be empty! '). Show ();//$name. Next (). Show (); error_name = True;return;} if (Reg.test (val)){$name. Next (). Hide (); error_name = false;} else{$name. Next (). HTML (' username is 6 to 15 English or numeric, can also contain ' _ ') $name. Next (). Show (); error_name = True;}} function Check_pwd () {var reg =/^[\[email protected]!#$%&^*]{6,15}$/;var val = $pwd. val (); if (val== ") {$ Pwd.next (). HTML (' Password cannot be empty! ') $pwd. Next (). Show (); error_pwd = True;return;} if (Reg.test (val)) {$pwd. Next (). Hide (); error_pwd = false;} else{$pwd. Next (). HTML (' passwords are 6 to 15 letters, numbers, can also contain @!#$%^&* characters ') $pwd. Next (). Show (); error_pwd = True;}} function Check_cpwd () {var pass = $ (' #pwd '). Val (); var cpass = $ (' #cpwd '). Val (); if (Pass!=cpass) {$cpwd. Next (). HTML (' Two input passwords inconsistent ') $cpwd. Next (). Show (); error_check_pwd = true;} else{$cpwd. Next (). Hide (); error_check_pwd = false;}} function Check_email () {var re =/^[a-z0-9][\w\.\-]*@[a-z0-9\-]+ (\.[ a-z]{2,5}) {1,2}$/;var val = $email. val (), if (val== ") {$email. Next (). HTML (' mailbox cannot be empty! ') $email. Next (). Show (); error_email = True;return;} if (Re.test (val)) {$email. Next (). Hide (); error_email = false;} else{$email. Next (). HTML (' The mailbox you entered is not in the correct format ') $email. Next (). Show (); errOr_email = True;}}  $ ('. Reg_form form '). Submit (function () {if (Error_name = = False && Error_pwd = = False && Error_check_pwd = = False && Error_email = = False && Error_check = = False) {return true;} Else{return (false;});})
　　
　　
　　
　
Getting Started with jquery