Advanced jQuery Miscellaneous (4)

Article Directory

1. Replacement of $

When $ conforms to a conflict, you can use the noConflict() method to cancel the role of $, or replace the role of $ with other variables, or directly replace it with jQuery (self $ == jQuery)

// 用 jq 替代
var jq = $.noConflict();
jq(document).ready(function(){
    
    
  jq("button").click(function(){
    
    
    jq("p").text("jQuery 仍然在工作!");
  });
});

// 用jQuery替代
$.noConflict();
jQuery(document).ready(function($){
    
    
  $("button").click(function(){
    
    
    $("p").text("jQuery 仍然在工作!");
  });
});

Second, use JSONP to achieve cross-domain

Requirements:
If the customer wants to visit: https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction.
Suppose the customer expects to return data: ["customername1","customername2"].
The data actually returned to the client is displayed as: callbackFunction(["customername1","customername2"]).

Server-side JSONP format data

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

The complete code of the client page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
    
    
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>
</body>
</html>

Three, jQuery miscellaneous methods, utilities, callback objects, deferred objects reference☆

Novice Tutorial-Miscellaneous Methods

Four, jQuery's own attributes reference☆

Novice Tutorial-jQuery Properties

Five, jQuery plug-in introduction and reference☆

jQuery tree menu plugin (Treeview)

Insert picture description here

jQuery Validate form validation, jQuery Password Validation (password validation)

Provides a powerful validation function for the form

jQuery Cookie plugin

Operate cookies through jQuery

jQuery Autocomplete

Search and filter values, generally used in input box prompts

jQuery Growl plugin (message reminder)

Show feedback message, the message will disappear automatically after a period of time

jQuery Tooltip

A prompt box appears when the mouse moves on an element. The current version of the plug-in is 1.3, which has not been updated for a long time. It is recommended to use jQuery UI Tooltip

reference

Novice Tutorial-jQuery Plugin