Jquery_day1

Jquery_day1

1. Review js_day2

   1. Prevent the default behavior of submitting the form οnsubmit = "return false" hyperlink javascript: void (0)

   2. Event Object event acquisition event source target horizontal and vertical coordinates clientx clienty

   3. Diffusion of event bubbling inner layer to the outer IE event.canceIBubble = true, Chrome exent.stopPropagation

   4. DOM Document Object Model

      • The document as a tree, the tree node corresponding to the object is the page label objects

      • Node obtains document.getElementById ( "id attribute value") -> node object

      • Modifications Modifications node attributes obj. Attribute name = " 'value' inner elements innerTextinnerHTMl

      • Create a text label ducoment.createTextNode node createElement ()

      • To delete a node parent node .removeChild (child node)

   5. BOM browser object model

      1. Some components of the browser as an Object window, document, location, history

      2. method

         • window3 Tips

         • Timer

2. Jquery Introduction

   1. Concept: Product is a JavaScript framework

   2. JavaScript solve problems

      • Programming complexity, complex grammar get complicated

      • Browser differences exist

3. Setup the development environment

   1. Built in the webroot js folder file introduced
      • jquery-1.8.3.js annotated source after use when learning
      • Users download a small file with the fast development of jquery_1.8.3min.js
   2. The introduction of the current page file jquery
      • script src = “js/jquery-1.8.3.js”
   3. grammar
      • Gets the labels text content
      • $ ( "# Label") .text ();
   4. note
      • Writing code to redefine a script tag
      • After the code to be introduced into the file code
   5. js and the object is not a jquery, methods and properties can not be mixed, encapsulated object jquery js object.
   6. Transformation
      • js object into jquery object $ (js object)

4. Jquery a selector (Get Object tab)

   1. The basic selector [used must master]

      • id selected by the tag label object id attribute acquisition

        Syntax: $ ( "# id attribute value");

      • Class selector acquired by the tag label object class attribute value

      Acquiring a corresponding label objects hide jqueryObj.css ( "display": none ");

      ​ $(".class").css(“display”,“none”);

      • The tag selector label object by acquiring the tag name tags

      Syntax: $ ( "tag name") .css ( "display", "none");

      • Multiplexer label object acquired by combining a plurality of selectors

      Syntax: $ {selector 1, selector 2}

      • Full selector

        Syntax $ (*);

   2. Level selector

      • Descendant selectors get all sub-tabs

        Syntax: $ (selector + space + selector)

        Example: $ ( "ol + space + li") css ( "display", "none");.

      • Direct descendant selectors get a direct child tag of the parent tag

        Syntax: $ (selector> selector);

        Example: $ ( "ol> li") css ( "display", "none");.

      • Direct sibling obtains the first subsequent sibling label object

        Syntax: $ (selector + selector)

      • All subsequent sibling selectors get all the Brothers label objects

        Syntax: $ ( "selector ~ Selector")

        note:

        • js a blank text operator subnode
        • jquery not a blank text node

   3. Simple filter selector (after acquiring a set of labels to objects screened again)

      • : First acquiring a first label object in a set of tags

      Syntax :( "Selector: first");

      • : Last Gets the last label in the label of a group of objects

      Syntax :( "selector: last");

      • : Eq (index) to obtain a set of index equal index tab label object

      Syntax :( "selector: eq (index)");

      • : Gt (index) to obtain a set of object label tag subscript index greater than

      Syntax :( "Selector: gt (index)");

      • : Lt (index) obtaining a set of tags is less than the index subscript label object

      Syntax :( "Selector: lt (index)");

      • : Even acquire a set of index tab label objects is even

      Syntax :( "Selector: even");

      • : Odd index label obtaining a set of tags of objects is odd

      Syntax :( "Selector: odd");

      • : Not (selector) to obtain a set of label objects does not contain a tag selector

      Syntax :( "selector: not (selector)");

   4. Content filter selector (if there are objects from content filtering tag label

      • : Empty get inside empty label objects
      • : Parent has child objects get inside the label tag
      • : Contains (text) Gets the label objects that contain specified text

   5. Visibility filter selector

      • hidden: Get all Hidden Object tags

        Syntax: $ ( "Tags: hidden")

      • visible: Get all visible label objects

        Syntax: $ ( "Label: visible")

   6. Attribute filter selector (by tag label object attribute filter object)

      • Acquiring the tag object includes attribute name corresponding to

        Syntax: $ ( "selector [property name])

      • Acquiring the tag object includes attribute name corresponding to the specified attribute value

        Syntax: $ ( "selector [attribute = value])

      • Acquiring the tag object includes attribute name corresponding to the attribute value is not

        Syntax: $ ( "selector [! Attribute name = value])

        Note:! No corresponding attribute name = attribute value can be considered not equal

   7. And check boxes for the associated selector

      • : Checked get selected radio button or checkbox

        示例:$(“input[type =checkbox] : checked”)

   8. Get the drop-down list of related selector

      • : Selected to obtain a list of items selected by the user

   9. Form-related selectors (easy to obtain form elements use)

      • : text
      • : file
      • : image
      • : button
      • : hidden
      • …

   Traversal label

   1. for loop iterates

      • Js during traversal native acquired DOM object when the object needs to be converted into jquery object

   2. Each traversal

      • Array object .each (function () {

        // traverse during operation

        The current element $ (this) .text ();

        } );

      • Note: js native DOM object when the object is retrieved needs to be converted into a jquery object

   Operation page structure

   1. Create a page element

      • Js:document.createTextNode()

        ​ document.createElement()

      • jquery: $ ( "tag")

        $ ( "<Tag> text </ tab>")

        Placing an object to the page parentObj.append ();

   2. Delete page elements

      • Parent tag objects .empty (child tag object) to clear the internal label elements
      • Parent label objects .remove (sub-label object) to delete the label itself without also removing a child tag

   3. Modify page elements

      • Modify the value of the property input

        Get: $ () obj.val () Gets the attribute value input box value

        Modify: $ () obj.val ( "value")

      • The label text to retrieve and modify

        $ () Obj.text () to get the text message

        $ () Obj.text ( "value") to modify text message

        $ () Obj.html () Gets the label inside the object

        $ () Obj.html ( "value") to modify the internal label object

      • Access and modify label style

        $ () Obj.css ( "attribute name") to obtain the corresponding attribute value of the attribute name

        $ () Obj.css ( 'attribute name', 'attribute value ") to modify the attribute value of the attribute corresponding to

        Note that support for chained calls # () obj.css () css ().;

      • Add the class attribute to the tag removed

        $ () Obj.addClass () Add Class Properties

        $ () Obj.removerClass () to remove the class attribute

      • Tag attribute values ​​to retrieve and modify the operation

        $ () Obj.attr ( "attribute name") acquired the property value corresponding to the tag

        Property Value $ () obj.attr ( "attribute name", "property value") modify the label object

        $ () Obj.prop ( "attribute name") acquired the property value corresponding to the tag

        Property Value $ () obj.prop ( "attribute name", "property value") modify the label object

      • Methods: Gets the current objects parent parent tag label object ()