1.JQuery with JavaScript What is the connection? JQuery technology What are the characteristics?
Contact:
jQuery, JavaScript, and that is the query (Query), that is, development aid JavaScript library.
Features:
1.JQuery is a lightweight Javascript framework.
2. compatible with the current mainstream browsers, such as 6.0 + IE, FF 1.5 +, Safari 2.0 +, Opera 9.0+
3. Rich DOM selector.
4. events, styles, animation support.
5.Ajax operational support.
6. scalable, has a wealth of plug-ins, such as EasyUI and so on.
2. [machine] View jQuery source file, based on knowledge of lectures, use function calls and anonymous self-closing
implementation calls the function package of the same name principle, respectively, to print out "I am anonymous function", "I am self-defined functions"
Two sentence
answer:
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-8">
<title> </ title>
<Script of the type = "text / JavaScript">
// anonymous function from call
( function (window, undifined) {
Alert ( "anonymous function I");
var bjsxt = "SXT";
window.bjsxt = bjsxt;
}) (window); // where "()" to perform character, window to argument
</ Script>
<Script type = "text / JavaScript">
function test () {
Alert (bjsxt); // test whether the anonymous function can obtain values of the variables
Alert (window.bjsxt);
}
function testBb () {
var AAA = 3000; // testBb local variable
function testBb declare function () {// function
alert ( "I custom function");
Alert (AAA);// Call external variable
var bbb = 10000; // local variable current testBb
return bbb; // return a value to the caller, it can be used effectively to maintain the value
}
// call the function return value, so testBb local variables had been destroyed worthwhile to continue to use
var ccc = testBb ();
Alert (ccc );
}
</ Script>
</ head>
<body>
<INPUT type = "Button" value = "test anonymous function call itself" the onclick = "test ();" />
<INPUT type = "Button" value = " test closure "the onclick =" testBb (); "/>
</ body>
</ HTML>
3. [machine] using jQuery technology displayed in a div "My First the this IS jQuery"
jQuery dollar signs in what role? (Let the browser know this is the jQuery code)
$其实就是Jquery的一个别名，$==jQuery.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function(){
//方式一
//$("div").html("this is my first jquery");
//方式二
$("div").text("this is my first jquery");
});
</script>
</head>
<body>
<div >
</div>
</body>
</html>
4.jQuery elements in the selector What?
ID selector
class selector
element selectors
composition Selector
sub Selector
level selector
attribute selector
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> </ title>
< type = Script "text / JavaScript">
function testSelector () {
// ID selector
// Alert ($ ( "# the uname") Val ().);
// class selector
//alert($(".girl ") .val ());
// element selector
// Alert ($ (" INPUT ") length);.
// compositions selector -" id class elment combined
// alert ($ ( "# uname , .girl, INPUT ") length);.
// child selector">: direct child element of the parent element "
// Alert ($ (" form> INPUT; ") Val ()).
intermediate // with level selector" separated by spaces "
// Alert ($ ("INPUT form ") length);.
// attribute selector
alert ($ (" div [name = 'div1'] ") text ()).;
}
</script>
</head>
<body>
<h1>Jquery常用选择器</h1>
<input type="button" value="jq常用的选择器" onclick="testSelector();"/>
<hr />
<input type="text" id="uname" name="uname" value="momo" />
<input type="password" class="girl" id="pwd" name="pwd" value="lulu" />
<hr />
<form>
<label>Name:</label>
<input name="name" type="text" value="tantan" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<div name="div1">1111111</div>
<div name="div2">2222222</div>
</body>
</html>
5. The following text code is correct? If the error, pointed out the error and write the correct code
<HTML>
<head>
<Script type = "text / JavaScript">
function Test () {
Alert ($ ( "# InP") value.)
}
Test ();
</ Script>
</ head>
<body>
< type = INPUT 'text' name = 'InP' ID = 'InP' value = 'zhangsan'>
<body>
</ HTML>
answer
error 1: where no import library JQuery, JQuery techniques can not be used.
Error 2: JQuery object can not use the object attribute value JS give switch val ().
Error 3: The page is loaded from top to bottom in the order loaded, you want to make the page can get the value of the value of the input element at load time, was moved to the script block after the input element.
Error 4: not a single quote is Chinese, was changed to English, the default value of the local value of more than a "=" sign.
<HTML>
<head>
<Script the src = "JS / jQuery-3.1.1.min.js" = type "text / JavaScript"> </ Script>
</ head>
<body>
<
<script type="text/Javascript">
function test(){
alert($("#inp").val());
}
test();
</script>
</html>
6. Use attribute attr jQuery operating elements () method and val () What is the difference?
attr ():
1. Get value attr (name), to obtain a name attribute value matching the first element. You can easily retrieve a property value from the first matching element by this method. If there is no corresponding element attribute, undefined. For the text box, the default value can only be acquired value can not obtain the value changed to the value
2. Set value attr (key, name), a property set for all element values match.
Val ():
3. with Val () to get the current value of the first matching element of a multi-element used to obtain the value of the form to a value capable of obtaining the changed values, e.g. input, select or textarea.
4. Multi-Val ( "value") value to the value of the text box.
[7] using jQuery machine technology completion code below
<HTML>
<head>
<Script type = "text / JavaScript">
function Test () {
// print out all of the input attribute value
// value of the modified input value Lisi
}
() function test2 {
// page in modify the value of the input box, and print
}
</ Script>
</ head>
<body>
<iNPUT type = 'Botton' value = 'test test' the onclick = "">
<iNPUT type = 'Botton' value = 'test test1 'onclick = "">
<div>
<input type=’text’ name=’inp’ value=’zhangsan’>
</div>
<body>
</ HTML>
Answer:
<HTML>
<head>
<Script the src = "JS / jQuery-3.1.1.min.js" = type "text / JavaScript"> </ Script>
<Script type = "text / Javascript ">
function Test () {
// print out all the attribute values of the input
alert ($ (" input [type = text] type ") +" ") attr (." - "+ $ (" input [type text =]. ") attr (" name ") +" - "+ $ (" input [type = text]. ") Val ());
// the modified input value is Lisi
$ (" input [type text =]. ") Val (" Lisi ");
}
function test2 () {
// modify value input box on the page and prints
alert ($ (" input [type = text] ") val ()). ;
}
</ Script>
</ head>
<body>
<input type='button' value='测试test' onclick="test();">
<input type='button' value='测试test1' onclick="test2();">
<div>
<input type='text' name='inp' value='zhangsan'>
</div>
<body>
</html>
[8] using jQuery machine code demonstrates how the HTML element
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> </ title>
<Script type = "text / JavaScript" the src = "JS / jQuery-3.1.1.js" > </ Script>
<Script type = "text / JavaScript">
function operHtml () {
// Get html text (): the value of energy obtained (containing html tag elements) of matching elements
// alert ($ ( "# . testDiv ") html ()) ;
// set text html (): argument html tags will not be treated as ordinary text processing
//$("#testDiv").html(3333333);
// $ ( "testDiv #") html ( "<h2>. 333333333 </ h2> ");
// Get the text text (): can get to a value in matching elements (not contain html element tag)
// Alert ($ ( "testDiv #") text ().);
// set html text (): argument html tags can be processed as normal text
. $ ( "TestDiv #") text (. "<B> s Some </ B> new new text");
}
function testDom () {
additive element // internal
//$("#showDiv").html("<input type = 'text'> " );
// append ( ""); additional content to match the interior of each element.
//$("#showDiv").append("<input type = 'text'> " );
// appendTo (content): all the elements that match the specified p appended to the div element set
//$("p").appendTo("div ");
// appendTo (content): p all matching elements appended to a specified element #showDiv
//$("p").appendTo("#showDiv ");
// prepend (content): Pre-content p element to element within each #showDiv match.
// $ ( "# showDiv") prepend ($ ( "p")).;
// external additive element
// after ( ""): Inserts after each p element div element matching
//$("div").after($("p "));
// before ( ""): Inserts p element before each div element matching
//$("div").before($("p "));
// delete elements
// the Remove ( ""):
//$("div").remove();// traverse delete
//$("div").remove("div:last");// deleted matching div element last div element
}
</ Script>
</ head>
<body>
<INPUT type = "Button" value = "test text" the onclick = "operHtml ();" />
<INPUT type = "Button" value = "operation document" the onclick = "TESTDOM ();" />
<div ID = "testDiv">
<h1 of> 11111111111111 </ h1 of>
</ div>
<HR />
<div ID = "showDiv"> 111111111 </ div>
<P> Would like to say the I: </ P>
<div> 222 222 222 222 </ div>
<div> 333 333 333 333 </ div>
</body>
</html>
9. The difference between HTML text () method and a text () method
1. Obtain value matching elements
html (): the value can be obtained in the matching elements (elements containing html tag)
text (): the value can be obtained in the matching elements (element tag does not include html)
2. Set values of matching elements
html ( "<h2> 333333333 < / h2>"): parameter html tag is not as normal text processing text ( "<h2> 333333333 < / h2>"): the parameters can be treated as ordinary text html tags deal with
10. The difference between the CSS text () method. AddClass and () method
1.css (name): the first style name acquired attribute value matching element.
2.css (name, value): all the matched elements, a set value of the style name attribute.
3.addClass (name): Add class name specified for each matching element, to the effect of adding style
[11] machine using the following techniques jQuery code completion
<HTML>
<head>
<Script type = "text / JavaScript">
// Open 300px by page display width, high 300px by, purple background, font div No. 20 is
</ Script>
</ head>
<body>
<div > jQuery is easy </ div>
<body>
</ HTML>
answer:
<HTML>
<head>
<style type = "text / CSS">
.test {
width: 300px by;
height: 300px by;
background-Color: Purple ;
font-size: 20px;
}
</ style>
<Script type = "text / JavaScript" the src = "JS / jQuery-3.1.1.js">
</ Script>
<Script type = "text / JavaScript">
/ / open page display width 300px, high 300px,Purple background, font div No. 20 is
$ (function () {
$ ( "div"). AddClass ( "Test");.
});
</ Script>
</ head>
<body>
<div> jQuery is easy </ div>
<body>
</ HTML>
<HTML>
<head>
<Script type = "text / JavaScript">
// use jQuery border on all page as a broken line width 2px
</ Script>
</ head>
<body>
<body>
</ HTML>
Answer:
<HTML>
<head>
<Script type = "text / JavaScript" the src = "JS / jQuery-3.1.1.js">
< / Script>
<style>
.test {
border: Dashed 2px;
}
</ style>
<Script type = "text / Javascript">
// using jquery border on all page as a dotted line width 2px
$ (function () {
$ ( "body"). addClass ( "Test");.
});
</ Script>
</ head>
<body>
<body>
</ HTML>
12. Use text document lists the operating structure of the jQuery methods are what
1. Add the internal elements of
HTML ()
the append ()
the appendTo ()
prepend ()
2. Add external elements
the After ()
the before ()
3. remove elements
remove ()
[13] machine completion code below
<HTML>
<head>
<Script type = "text / JavaScript">
// div using jQuery additional sentence of "The harder the lucky"
// use jQuery tab to move to the div b
</ Script>
</ head >
<body>
<b> jQuery provides a wide variety of document structure operated </ b>
<div the above mentioned id = ""> today weather for learning </ div>
<body>
</ HTML>
the answer:
<HTML>
< head>
<Script type = "text / JavaScript" the src = "JS / jquery-3.1.1.js">
</ Script>
<Script type = "text / Javascript">
// div using jquery adding a word of " the harder the more lucky "
$ (function () {
$ (" div ") the append (." the harder the more fortunate ");
});
// tag using jquery b move into div
$ (function () {
$ ( "b") the appendTo ( "div");.
});
</ Script>
</ head>
<body>
<b> jquery offers a wide variety of document structure operated </ b>
<div the above mentioned id = ""> Today weather for learning </ div>
<body>
</ HTML>
14.JQuery the bind and unbind methods, respectively, what role?
1.bind: for every match in the event of one or more elements bind the event handler function.
For example:
// Get event bound to be an element
var btn = $ ( "# btn");
// event binding, binding once complete, you can perform multiple
btn.bind ( "click", function ( ) {
// write the code you want to write
alert ( "bind finished");
});
2.unbind: bind () is the reverse operation, the event from each of the matched elements to delete the binding
example:
// Event unbound
function testUnBind () {
// To obtain an event unbundling element
var btn = $ ( "#btn");
btn.unbind ( "the Click");
}
The 15.JQuery one () method What are the characteristics? Use Code Description
For example, (part of the code):
// event binding, binding once complete, you can perform a ****
var btn = $ ( "the INPUT");
btn.one ( "the Click", function () {
// write your write the code
alert ( "binding complete");
});
The 16.jQuery ready () method and the method body onload in what is the difference?
1. execution time
window.onload must wait until after the implementation of all the elements, including images of the inside pages loaded.
$ (document) .ready () is executed after the DOM structure of the drawing is completed, without waiting to load.
2. Write the number of the different
window.onload you can not write more, if there are multiple window.onload method, will be overwritten, execute a last will.
$ (document) .ready () can write multiple simultaneously, and can be implemented.
3. Simplified wording
window.onload does not simplify writing
$ (document) .ready (function ( ) {}) can be abbreviated to $ (function () {}) ;
[17] use of the machine in jQuery ready () successfully ejected implemented method of loading a page "page loads successfully mention
shown block"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("页面加载成功提示框");
});
</script>
</head>
<body>
</body>
</html>
18. [machine] using animation in jQuery fade in and fade-out page background image
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
//淡入淡出
$("div").fadeIn(5000);
$("div").fadeOut(5000);
});
</script>
</head>
<body>
<div style="width: %99;height: 99%; display: none;">
<img src="img/pictrue.jpg" width="100%" height="100%" />
</div>
</body>
</html>
19. [machine] using jQuery to replace the background color of the page to achieve small features, the following code completion
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script src="JScript/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
//实现网页背景更换的功能
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="10%">
<tr>
<td style="background-color:Red">红色</td>
<td style="background-color:Blue">蓝色</td>
<td style="background-color:Green">绿色</td>
</tr>
</table>
</body>
</html>
答案：
<html>
<head>
<title></title>
<Script src = "JS / jQuery-3.1.1.js" of the type = "text / JavaScript">
</ Script>
<Script of the type = "text / Javascript">
// achieve page background replacement function
$ (function () {
$ ( "TD") the Click (function () {.
var Color = this.style.backgroundColor;
$ ( "body") CSS ( "background-Color", Color);.
});
});
</ Script >
</ head>
<body>
<Table border = ". 1" cellspacing = "0" cellpadding = "0" width = "10%">
<H5> click on the following color change the background color </ H5>
<TR>
<TD style = "background-color: red "> red </ td>
<TD style = "background-Color: blue"> blue </ td>
<td style="background-color:Green">绿色</td>
</tr>
</table>
</body>
</html>