noteforW3schoolsJQuery

最新推荐文章于 2024-10-01 20:12:28 发布

SH_Richard_Lee

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量317

点赞数

分类专栏： note backup 文章标签： javascript

本文链接：https://blog.csdn.net/SH_Richard_Lee/article/details/52566258

版权

note 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

backup

8 篇文章 0 订阅

订阅专栏

**
for W3school/js tutorials, i feel a litter unpleased. cause i do not learn how to master my webpage with JS. it argues about variables, functions, and objects. you know, without useful apliments, i can not cheer myself up. I want to read “head first JS” book, but ahead of it, learn JQuery. Use JQuery to master my page first.
And then I realise I hate video tutorials a little, which makes me sleepy. And unable to search.
**

JQuery Get Start

Do you wonder why we do not have type=”text/javascript” inside the

JQuery CDN

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
// or
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
//in <head> tag

it will load this js file faster.

JQuery Syntax

The Document Ready Event

You might have noticed that all jQuery methods in our examples, are inside a document ready event:

$(document).ready(function(){

   // jQuery methods go here...

});

JQuery Events

The term “fires/fired” is often used with events. Example: “The keypress event is fired, the moment you press a key”.

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

* this is a little cute *

Commonlu Used JQuery Event Methouds

The focus() and blur() method attaches an event handler function to an HTML form field.

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});

The on() Methoud Attaches one or more envent handlers for the selected elements.

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    }, 
    click: function(){
        $(this).css("background-color", "yellow");
    } 
});

JQuery Hide Show

Syntax:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

JQuery Animate

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});

**
Is it possible to manipulate ALL CSS properties with the animate() method?

Yes, almost! However, there is one important thing to remember: all property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

Also, color animation is not included in the core jQuery library.
If you want to animate color, you need to download the Color Animations plugin from jQuery.com.

not that convienient to use.
**

jQuery animate() - Using Relative Values

It is also possible to define relative values (the value is then relative to the element’s current value). This is done by putting += or -= in front of the value:

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

** be careful, use comma between stetaments.
$(selector).function();$ (selector).function({statement1, statement2});
**

jQuery animate() - Using Pre-defined Values

You can even specify a property’s animation value as “show”, “hide”, or “toggle”:

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
});

jQuery animate() - Uses Queue Functionality

By default, jQuery comes with queue functionality for animations.

This means that if you write multiple animate() calls after each other, jQuery creates an “internal” queue with these method calls. Then it runs the animate calls ONE by ONE.

So, if you want to perform different animations after each other, we take advantage of the queue functionality:

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
});

* get use to this syntax. a little strange, use function(){} as parameter in a statement, or write several statements in a statement*

JQuery Chaining

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

* in JQuery, programmers can get objects more easier, using $(selector), instead of using document.getElementByID in DOM. *

A Callback Function for text(), html(), and val()

All of the three jQuery methods above: text(), html(), and val(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) value. You then return the string you wish to use as the new value from the function.

The following example demonstrates text() and html() with a callback function:

$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
        return "Old text: " + origText + " New text: Hello world!
        (index: " + i + ")"; 
    });
});

$("#btn2").click(function(){
    $("#test2").html(function(i, origText){
        return "Old html: " + origText + " New html: Hello <b>world!</b>
        (index: " + i + ")"; 
    });
});

* do not fully understand. use function(){} as a parameter, but where do his parameters come from? And which one is callback function *
* souga, element.text() or element.text(string) or element.text(function(index,text){}) is three functions, callback function’s paramemeters are given by defination. *

attr()

The following example demonstrates how to set both the href and title attributes at the same time:

Example
$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.w3schools.com/jquery",
        "title" : "W3Schools jQuery Tutorial"
    });
});

A Callback Function for attr()

The jQuery method attr(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) attribute value. You then return the string you wish to use as the new attribute value from the function.

The following example demonstrates attr() with a callback function:

$("button").click(function(){
    $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery"; 
    });
});

* good example *

JQuery Add

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML  
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("body").append(txt1, txt2, txt3);      // Append the new elements 
}

JQuery AJAX

* hahaha, that’s what i heared about longlong ago *
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
* sadly, element.load function of AJAX need serve code to function, not only need to put a txt file into the same fold. *