JQ Learning Content

Posted by micronicos on Sun, 20 Feb 2022 04:02:27 +0100

Catalog

1. jQuery Start

2. Selector

3. Styles

4. DOM Operation

5. Attributes

6. Events

7. Animation effects

1. jQuery Start

1.1 Entry function

Also known as preload function
<script>
// First Writing Method
$(document).ready(function(){
  // Write your code here...
});
  // Second Writing
$(function(){
  // Write your code here... 
})
</script>
JavaScript Get in html Method of element
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()
jQuery Methods to get objects in
$()
1.2 jQuery Obtain DOM element
$() To get the object (DOM element )
2. Selector
Selectors are designed to help us select elements, such as in css Selector in, modifies the style after selecting the element, and modifies the style in
Jquery Once the element is selected by the selector in the DOM Operational
Most css Selectors can be applied to jQuery Selector
CSS Selector Classification
(1)  basics
* Number selector
Label ( element ) selector
Class selector . Class name
id selector #id value
(2) Composite selector
Descendant Selectors E F Look for E Inside an element F element
Subset selector E>F Look for E A subset of elements F element
Neighbor Brother Selector
Sibling selector
Multiple selectors
(3) Pseudo-class selector
:hover
:active
:visited
:link
:fifirst-child
:last-child
:nth-child()
:not()
:nth-of-type()
(4) Pseudo Object Selector
::before
::after
::fifirst-line
::fifirst-letter
3. Styles
1. css() by dom Object Setting Style
First usage : css( Property Name , Attribute Value ) Only one style can be set at a time
<div class="demo"> 
        Set a style
</div> 
<script> 
$('.demo').css('color','blue').css('background-color','red')
 </script>
Second usage : css({ Property Name : Attribute Value , Property Name : value ....})
Set a style
4. DOM Operation
1. append() Append child elements to the end of matched parent elements
<div class="add">append</div>
<script>
     /*
       1. Create a dom element
         jQ: $('<a href="http://www.baidu.com">Baidu</a>')
       2. Get parent element 
       $('.add')
       3. Append with append() 
       Parent element object. Append (child element to append)
                */
var obj = $('<a href="http://www.baidu.com">taobao</a>') 
$('.add').append(obj)
</script>
2. appendTo() Append child elements to parent elements
<div class="add">append</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
obj.appendTo($('.add'))
</script>
3. prepend() Add a child element to the beginning of a parent element
<div class="add">prepend</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').prepend(obj)
      //Result: <div class="add"><a 
href="http://www.baidu.com">taobao</a>prepend</div>
</script>
4. prependTo() The element is preceded by another set of specified element elements.
<div class="parent">Bao Jianfeng comes out of sharpening</div>
   <span id="child">Plum blossom comes from bitter cold</span>
<script>
     $(function(){
                $('#child').prependTo($('.parent'))
                // Effect: <div class="parent"> <span id="child">Plum blossom fragrance comes from bitter cold </span>Sword blade comes out from sharpening </div>
     })
</script>
5. remove() Remove matched elements
<p>Apple 01</p>
<p class="two">Apple 02</p>
<p>Apple 03</p>
<script>
//$('p').remove() // remove() method deletes all matching elements without passing parameters
$('p').remove('.two') // Remove p tag with class name equal to two
</script>
5. Attributes
1. attr() Get or set properties
<div class="demo" title="This is a test code">attr Method </div>
<script>
// attr() Gets the value of the attribute of the matching element
      var res = $('.demo').attr('title')
// attr() sets the attribute value of the matching element
       $('.demo').attr('title','this is a test code') // Modify only one attribute value
       $('.demo').attr({name:'code',id:'test'}) // Setting multiple properties
</script>
2. removeAttr() Remove Attribute
<div class="demo" title="This is a test code" id='test'>attr Method </div>
<script> 
$('.demo').removeAttr('id') 
</script>
Note: Only one parameter is accepted
3. addClass() Add Class Name
<div id="demo"> Day by Day</div> 
<script>
     $(this).addClass('active') 
</script>
4. removeClass() Removed from class name
<div id="demo" class='active'> Day by Day</div> 
<script>
     $(this).removeClass('active') 
</script>
5. toggleClass() Delete when a class name exists and add when it does not exist
<div id="demo"> Day by Day</div> 
<script> 
     $('#demo').click(function(){ 
       $(this).toggleClass('active') 
</script>
6. html() Gets or sets the content of the matching element ( Include Tags )
<div class="content"><span>author:Wang Zhihuan</span><br>Day by Day</div> 
<script>
     $(function(){ 
            // html() Gets the content of the element as innerHTML in JavaScript
            var con = $('.content').html() 
            // console.log(con); 
           // html() sets the content of the matching element
$('.content').html('go<a href="http://Jd. COM "target="_ Blank ">Jingdong</a>Online shopping")
        })
</script>
7. text()
<div class="content"><span>author:Wang Zhihuan</span><br>Day by Day</div>
<script>
      $(function(){
         // text() Gets the text content of an element that does not contain the same tag as innerText in JavaScript
         var con = $('.content').text()
         // console.log(con); 
         // text() Sets the text content of the matching element
$('.content').text('go<a href="http://Jd. COM "target="_ Blank ">Jingdong</a>Online shopping")
      }) 
</script>
Be careful: text() and html() The biggest difference, text() Only text content is processed, labels are not recognized, and html() Method can be identified
Label
text() and html() Method cannot be used to get or set the value of a form label except button and textarea These two items.
Outside Label
8. val() Gets or sets the value of the form label
<input type="text" id="user" value="zhangsan">
<script>
    $(function(){
       // val() Gets the value of the form label
       var res = $('#user').val()
       // console.log(res);
       // val() Sets the value of the matching element
       $('#user').val('Zhang San')
}) 
</script>
9. prop() Set or get the attribute value of an element
10. removeProp() Move Out Attributes
attr() and prop() Application Scenarios
prop() Methods are often used to label property values that have true and false When using, for example: checked , seleted , readonly ,
disabled
6. Events
1.1  Mouse events
Grammar:
Event Object (dom element ). Event Name (function(){})
1. Mouse Click Event click()
<style> 
       .clk{
            width: 200px; 
            height: 180px; 
            background-color: red; 
            }
            .active{
                     background-color: blue;  
            }
</style>
<div class="clk"></div> 
<script> 
     $(function(){ 
       $('.clk').click(function(){ 
          $('.clk').toggleClass('active') 
      }) 
   })  
</script>
2. Mouse Move Out Event mouseout()
3. Mouse Skip Event mouseover()
1.2  Form Events
1. Focus Events ( Get Focused Events ) focus()
2. Loss of Focus Event blur()
3. Content Change Events change()
4. Form Submission Events submit()
Be careful : Object is form Label
1.3  Keyboard events
1. KeyDown keydown()
2. Keyboard popup event keyup()
3. Keyboard press events keypress()
Keyboard code
1.4  jq Unique event method in
1. Event Binding Method bind()
2. Event unbound method unbind()
3. Trigger Event Method Only Once one()
4. on()
Event binding of elements requiring event delegation Typically created dynamically dom Element requires event delegation
7. Animation effects
1.1 Show and hide.
show() display
<button>display</button> 
<button>hide</button>
<div class="show">display</div> 
<script>
    $(function(){
    // Click the display button div to display
    $('button:eq(0)').click(function(){
       $('.show').show(2000)
   })
   }) 
</script>
hide() hide
<button>display</button> 
<button>hide</button> 
<div class="show">display</div> 
<script> 
    $(function(){ 
    // Click the Hide button div to disappear 
    $('button:eq(1)').click(function(){ 
        $('.show').hide(2000,function(){ 
             $(this).show(1000) 
       }) 
    })
    }) 
</script>

1.2 Drop-up and Drop-down

slideUp() Pull Up
slideDown() drop-down
slideToggle() If the element does not display a drop-down Displayed Is Pull Up
<button>Pull Up</button> 
<button>drop-down</button> 
<button>toggle</button> 
<div class="show">div Label</div> 
<script> 
    $(function(){ 
        $("button:eq(0)").click(function(){ 
            $(".show").slideUp(2000) 
        })
        $("button:eq(1)").click(function(){ 
            $(".show").slideDown(2000) 
        })
        $("button:eq(2)").click(function(){ 
            $(".show").slideToggle(2000) 
        }) 
     }) 
</script>

1.3 Fade in and out

fadeIn() Fade in
fadeOut Fade out
fadeToggle()
<button>Fade in</button> 
<button>Fade out</button> 
<button>toggle</button> 
<div class="show">div Label</div> 
<script> 
     $(function(){ 
         $("button:eq(0)").click(function(){ 
              $(".show").fadeIn(2000) 
     })
     $("button:eq(1)").click(function(){ 
         $(".show").fadeOut(2000) 
     })
     $("button:eq(2)").click(function(){ 
         $(".show").fadeToggle(2000) 
      }) 
    }) 
</script>

1.4 Custom Animation

animate()
<style>
        .show{
               width: 240px; 
               height: 180px; 
               background-color: red; 
             }
</style>
<body>
          <div class="show">div Label</div>
<script> 
    $(function(){ 
       $(".show").animate({ 
              "margin-top":'200px', 
              "margin-left":'300px' 
      },2000) 
   }) 
</script>

Topics: JQuery