4th Chapter Web04-jquery

Today's mission
? Use jquery to complete page timed pop-up ads
? Use jquery to complete alternating colors for tables
? Use jquery to complete the check box for the full selection effect
? Use jquery to accomplish provincial and municipal linkage effects
? Use jquery to complete the following list of left and right choices
Teaching navigation
Teaching objectives
Mastering the basic use of jquery
Master jquery's basic selector, hierarchy selector
The basic operation of the DOM is done using jquery.
Teaching methods
Case-driven approach
1.1 Review of last lesson:
Javascript:

• JavaScript: Basic use:
  • ECMAScript:
    • variable: Weakly variable type: var i;
    • data type: Primitive type and reference type.
    • Statement
    • operator
    • object:
      • string,boolean,date,math,number, regular ...
    • global function: eval (), encodeURI (), encodeURIComponent (), decodeURI (), decodeURIComponent (), parseint (), Parsefloat ()
  • BOM: Browser object.
    • window:
    • Navigator:
    • screen:
    • history:
    • Location:
  • DOM: Document object.
    • Get element:
      • document.getElementById (), Document.getelementsbyname (), document.getElementsByTagName () ;
    • add element:
      • element.appendchild (), Element,insertbefore ();
    • Delete element:
      • element.removechild ();
    • Create element:
      • document.createelement (), document.createTextNode ();
    • Modify element values:
      • innerHTML Properties:

1.2 Using jquery to complete timed pop-up ads: 1.2.1 Requirements:
Before using the JS way to complete timed pop-up ads, now use jquery to accomplish the same effect:

1.2.2 Analysis 1.2.2.1 Technical Analysis:
"Overview of jquery"
? What is jquery:
jquery is a JS framework (JS Class Library). The traditional JS is encapsulated.
Now the development of enterprises often do not use the traditional JS for development, usually using the JS framework for development.
? JS's Common framework:
Jquery,extjs,dwr,prototype ...
? Use of JQ:
Learn the syntax of jquery.

"Getting Started with jquery"
? JS file that introduces jquery.
<script src= ". /.. /js/jquery-1.11.3.min.js "></script>
? The entry function for jquery:
Traditional JS Way: page-loaded events can only be executed once.
/*window.onload = function () {
Alert ("AAA");
}

                    window.onload = function(){                            alert("bbb");                    }*/                    // JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.                    // window.onload 等页面加载完成后执行该方法.                    // $(function(){}):等页面的DOM树绘制完成后进行执行.                    // $相当于JQuery                    $(function(){                            alert("aaa");                    });                    $(function(){                            alert("bbb");                    });

"Conversion of JS objects and JQ objects"
Window.onload = function () {
Traditional JS mode:
var D1 = document.getElementById ("D1");
The properties and methods of the JS object:
d1.innerhtml = "attribute of JS object";
D1.html ("aaaaaa");
Converts a JS object into an JQ object.
$ (D1). HTML ("JS object turned into JQ object");
}
$ (function () {
var $d 1 = $ ("#d1");
$d 1.html ("Properties of the JQ object");
The object to be converted to JS:
One way
$d 1[0].innerhtml = "Turn the JQ object into a JS object";
Two different ways:
$d 1.get (0). InnerHTML = "Convert the JQ object to a JS object in two Ways";
});

"JQ Show and Hide"
? The effect of JQ operation:

• Show ();
  • Use one: JQ object. Show ();
  • Use two: JQ object. Show ("slow"); Slow,normal,fast
  • Use three: JQ object. Show (millisecond value); 1000
  • Use four: JQ object. Show (millisecond value, function () {});
• Hide ();
  • Use one: JQ object. Hide ();
  • Use two: JQ object. Hide ("slow"); Slow,normal,fast
  • Use three: JQ object. Hide (millisecond value); 1000
  • Use four: JQ object. Hide (millisecond value, function () {});
• Slidedown (); --Swipe down
  • Use one: JQ object. Slidedown ();
  • Use two: JQ object. Slidedown ("slow"); Slow,normal,fast
  • Use three: JQ object. Slidedown (millisecond value); 1000
  • Use four: JQ object. Slidedown (millisecond value, function () {});
• Slideup (); --Swipe up
  • Use one: JQ object. Slideup ();
  • Use two: JQ object. Slideup ("slow"); Slow,normal,fast
  • Use three: JQ object. Slideup (millisecond value); 1000
  • Use four: JQ object. Slideup (millisecond value, function () {});
• FadeIn (); -Fade in
  • Use one: JQ object. fadeIn ();
  • Use two: JQ object. FadeIn ("slow"); Slow,normal,fast
  • Use three: JQ object. FadeIn (millisecond value); 1000
  • Use four: JQ object. FadeIn (millisecond value, function () {});
• FadeOut (); -Fade Out
  • Use one: JQ object. FadeOut ();
  • Use two: JQ object. FadeOut ("slow"); Slow,normal,fast
  • Use three: JQ object. FadeOut (millisecond value); 1000
  • Use four: JQ object. FadeOut (millisecond value, function () {});
• Animate (); --Custom animations
• Toggle (); --click the Toggle function
  • JQ object. Toggle (Fn1,fn2 ...); Click the first time to execute FN1, click Second to execute fn2 ...

1.2.2.2 Step Analysis:
Step one: Create an HTML page.
Step two: Create a div for the ad section in the page, and set the div to be hidden.
"Step three": Set a timed operation, 5 seconds to perform a display method.
"Step four": In setting a timer, 5 seconds to execute a hidden method.
1.2.3 Code Implementation

<script>var time ;$(function(){// 设置定时 5秒钟执行一个 显示广告的方法：time = setInterval("showAd()",5000);});function showAd(){// 获得元素：//$("#adDiv").show(2000);// $("#adDiv").slideDown(2000);$("#adDiv").fadeIn(3000);clearInterval(time);// 再设置定时 5秒钟隐藏.time = setInterval("hideAd()",5000);}function hideAd(){//$("#adDiv").hide(2000);// $("#adDiv").slideUp(2000);$("#adDiv").fadeOut(3000);clearInterval(time);}</script>

1.2.4 Summary: 1.2.4.1 jquery selector:
"Basic Selector" (* * * * *)
? ID Selector

• Usage: $ ("#id")
  ? class selector
• usage: $ (". Class name")
  ? Element selector
• usage: $ ("element name")
  ? Wildcard selector
• usage: $ ("*") ? Parallel selector

• Usage: $ ("selector, selector, selector")
  $ (function () {
  $ ("#but1"). Click (function () {
  //alert ("AAAA");
  $ ("#one"). CSS ("Background", "#bbffaa");
  });

    $ ("#but2"). Click (function () {$ (". Mini"). CSS ("Background", "#                        Bbffaa ");                        });                        $ ("#but3"). Click (function () {$ ("div"). CSS ("Background", "#bbffaa");                        });                        $ ("#but4"). Click (function () {$ ("*"). CSS ("Background", "#bbffaa");                        });                        $ ("#but5"). Click (function () {$ ("#two, Span,.mini"). CSS ("Background", "#bbffaa");                });
  });

"Hierarchy selector":
? Descendant selector: Use a space all descendants contain grandchildren and the following elements
? Child element selector: Using elements of the > First layer (son)
? Next element: Use + next sibling element
? Sibling element: Use ~ All of the sibling elements behind
<script>
$ (function () {
Descendant selector:
$ ("#but1"). Click (function () {
$ ("Body div"). CSS ("Background", "#bbffaa");
});

                            // body下的第一层div元素                            $("#but2").click(function(){                                    $("body > div").css("background","#bbffaa");                            });                            // 查找下一个同辈的元素                            $("#but3").click(function(){                                    $("#three + div").css("background","#bbffaa");                            });                            $("#but4").click(function(){                                    $("#two ~ div").css("background","#bbffaa");                            });                    });            </script>

"Basic Filter Selector"

<script>
$ (function () {
$ ("#but1"). Click (function () {
$ ("#three Div:first"). CSS ("Background", "#bbffaa");
});
$ ("#but2"). Click (function () {
$ ("#three div:last"). CSS ("Background", "#bbffaa");
});
$ ("#but3"). Click (function () {
$ ("div:odd"). CSS ("Background", "#bbffaa");
});
$ ("#but4"). Click (function () {
$ ("Div:even"). CSS ("Background", "#bbffaa");
});
$ ("#but5"). Click (function () {
$ ("#three div:eq (1)"). CSS ("Background", "#bbffaa");
});
});

            </script>

"Content selector"

<script>
$ (function () {
$ ("#but1"). Click (function () {
$ ("Div:contains (' 1 ')"). CSS ("Background", "#bbffaa");
});
});

            </script>

The property Selector

"Form selector"

<script>
$ (function () {
$ ("#but1"). Click (function () {
$ (": Input"). CSS ("Background", "#bbffaa");
});
$ ("#but2"). Click (function () {
$ (": Text"). CSS ("Background", "#bbffaa");
$ ("input[type= ' text ']"). CSS ("Background", "#bbffaa");
});
});

            </script>

Form Property Selector

1.3 Case two: Table interlaced color case: 1.3.1 Requirements:
Use jquery to perform the display of alternating colors for tables of data.

1.3.2 Analysis:
1.3.2.1 Technical Analysis:
"The jquery selector"

• Basic Filter Selector:
  • Odd:
  • Even:

"Add and remove Styles in jquery"

• If the style is not defined beforehand, you can use CSS methods to set the background color for odd or even rows.
• If you have already completed the style definition in a CSS file, you cannot use CSS methods. Methods in the CSS class in JQ are used:
  • AddClass ();
  • Removeclass ();

1.3.2.2 Step Analysis:
"Step One": Introduction of jquery JS
Step two: In a page-loaded function, select odd rows, add styles
Step three: In a page-loaded function, select even rows, add styles
1.3.3 Code implementation:

<script>$(function(){/*$("tr:odd").addClass("odd");$("tr:even").addClass("even");*/$("tbody tr:odd").addClass("odd");$("tbody tr:even").addClass("even");});</script>

1.4 Case Three: Use jquery to complete the check box selection and all 1.4.1 requirements:
Use jquery to complete the check box for all and all of the actions that are not selected:

1.4.2 Analysis: 1.4.2.1 Technical Analysis:
"JQuery Methods for manipulating Properties"

• attr ();
  • Use method One: $ (""). attr ("src");
  • Use Method Two: $ (""). attr ("src", "test.jpg");
  • Use Method Three: $ (""). attr ({"src": "Test.jpg", "width": "100"});
• Removeattr ();
• Prop (); The new version of the method.
  • Use method One: $ (""). Prop ("src");
  • Use Method Two: $ (""). Prop ("src", "test.jpg");
  • Use Method Three: $ (""). Prop ({"src": "Test.jpg", "width": "100"});
• Removeprop ();
• AddClass ()
• Removeclass ();

1.4.2.2 Step Analysis:
Step One: Add a check box to the page.
"Step Two": Introduction of jquery JS
"Step three": Write the entry function of JQ
"Step Four": Click on the check box above to get all the check boxes below.
Step Five: Modify the value of the check box below.
1.4.3 Code implementation:

// 复选框全选和全不选$(function(){// 获得上面的复选框://var $selectAll = $("#selectAll");// alert($selectAll.attr("checked"));/*$selectAll.click(function(){// alert($selectAll.prop("checked"));if($selectAll.prop("checked") == true){// 上面的复选框被选中$(":checkbox[name=‘ids‘]").prop("checked",true);}else{// 上面的复选框没有被选中$(":checkbox[name=‘ids‘]").prop("checked",false);}});*/// 简化：$("#selectAll").click(function(){$(":checkbox[name=‘ids‘]").prop("checked",this.checked);});});

1.5 case four: Using jquery to complete the provincial and municipal two-level linkage: 1.5.1 Requirements:
On the registration page, the origin of the information, need to use the provincial and municipal linkage effect.
1.5.2 Analysis: 1.5.2.1 Technical Analysis:
"Dom manipulation of jquery"

• Common methods:
  • Append (); ---Add content after an element.
  • AppendTO (); ---After an element is added to another element.
  • Remove (); ---to remove an element.

"The Traversal of jquery"
The way to traverse one:

• $.each (Objects,function (i,n) {

});
The way to traverse two:

• $ (""). each (function (i,n) {
  });
  $ (function () {
  var arrs = new Array ("Jason", "Zhang Feng", "Zhang Furong");
  Use the each method to convert this array to an JQ object.
  /$ (ARRS). each (function (i,n) {
  Alert (i+ "" +n);
  }); /

                          $.each(arrs,function(i,n){                                alert(i+"   "+n);                        });                });

1.5.2.2 Step Analysis:
"Step One": Introduction of the registration page, the introduction of the JQ JS.
"Step two": Get to the first drop-down list, the Change event.
Step three: Gets the value to the selected drop-down list.
"Step four": Go to the array to do the comparison.
Step five: The value traversal in the array is obtained.
Step Six: Create elements, create text, add text to an element, and add elements to the second list.
1.5.3 Code implementation:

<script>$(function(){// 定义数组：/*var arrs = new Array(5);arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");arrs[4] = new Array("长春市","吉林市","四平市","延边市");*/var cities = [["杭州市","绍兴市","温州市","义乌市","嘉兴市"],["南京市","苏州市","扬州市","无锡市"],["武汉市","襄阳市","荆州市","宜昌市","恩施"],["石家庄市","唐山市","保定市","邢台市","廊坊市"],["长春市","吉林市","四平市","延边市"]];var $city = $("#city");// 获得代表省份的下拉列表:$("#province").change(function(){// alert(this.value);// alert($(this).val());$city.get(0).options.length = 1;var val = this.value;// 遍历并且判断:$.each(cities,function(i,n){// 判断:if(i == val){$(n).each(function(j,m){// alert(j+"   "+m);$city.append("<option>"+m+"</option>");});}});});});</script>

1.6 Case Five: drop-down list of left and right choice: 1.6.1 Requirements:
In the modified page of the classification, there is information about the item under a category. You can select the product information.

1.6.2 Analysis: 1.6.2.1 Technical Analysis:
"The jquery selector"

1.6.3 Code implementation:

Traditional JS way to implement: Window.onload=function () {//Add to the right: document.getElementById ("Addright"). onclick = function () {// Get the left drop-down list var selectleft = document.getElementById ("Selectleft");//Iterate through all the option elements in the list on the left. for (var i = selectleft.options.length-1;i>=0;i--) {//determines if the element is selected if (selectleft.options[i].selected = = True) { document.getElementById ("Selectright"). AppendChild (Selectleft.options[i]);}} All to the right: document.getElementById ("AddAll"). onclick = function () {//Get the left drop-down list var selectleft = document.getElementById ( "Selectleft");//Iterate through all the option elements in the list on the left. for (var i = selectleft.options.length-1;i>=0;i--) {document.getElementById ( "Selectright"). AppendChild (Selectleft.options[i]);}} Use JQ to complete the drop-down list left and right select: $ (function () {//Add left-selected element to the side $ ("#addRight"). Click (function () {//To get the option element selected on the left: $ ("#selectLeft Option:selected "). AppendTo (" #selectRight ");}); /Add all to the right of $ ("#addAll"). Click (function () {///Get the option element selected on the left: $ ("#selectLeft option"). AppendTo ("#selectRight"); /Remove Right is selected element to left: $ ("#removeLeft"). Click (function () {$ ("#selectRighT option:selected "). AppendTo (" #selectLeft ");}); /Remove Right is selected element to left: $ ("#removeAll"). Click (function () {$ ("#selectRight option"). AppendTo ("#selectLeft"); /double-click on the left side of an element to move to the right: $ ("#selectLeft"). DblClick (function () {$ ("option:selected", this). AppendTo ("#selectRight");}); /double-click an element on the left to move to the right: $ ("#selectRight"). DblClick (function () {$ ("option:selected", this). AppendTo ("#selectLeft");});

1.6.4 Summary: 1.6.4.1 jquery Common events:

Event switching for 1.6.4.2 JQ:

• Toggle (); --Click the Toggle Event
• Hover (); --Mouse hover switch

4th Chapter Web04-jquery