Tips for using jquery

The birth of jquery makes it easier for our front-end novices to operate web interactions.

Today I will bring you some tips on using jquery.

jquery blocks browser default behaviors such as hyperlinks.

$("a").click(function(event){
  event.preventDefault();
});

Jquery triggers the carriage return event

 $(function () {
    $('#target').bind('keyup', function (event) {
       if (event.keyCode == 13) {
          alert("Hello~");
       }
   });
});

Get the value of select

jquery can get the value of select just like getting the textbox value: $('select').val();

Copy text

Use window.clipboardData .setData('text', text);

You can put the text text into the system clipboard to realize the text copy function. However, this method is only supported by IE.

Google Chrome and Foxfire are not supported. Therefore, when using it, you should first determine whether the browser supports:

if (window.clipboardData) {  window.clipboardData.setData('text', text); }

Select text

For input or textarea text selection, jquery provides a simple function: select(). When calling it, you need to ensure that the text The box is visible and has focus.

$("#txtSample").focus().select();　　//现货的焦点，然后选择文本

Mouse events

mouseover and mouseout, mouseenter and mouseleave; these two sets of events are triggered when the mouse moves in and out of an element,

The biggest difference between them is: mouseover and mouseout bubble, if the mouse moves to Their child elements will also trigger this event,

and mouseenter and mouseleave will not bubble. ​​

This difference is very important!

Extension of jQuery object

    $.extend(target,prop1,propN)：

Extends an object with one or more other objects and returns the extended object. This is the inheritance method implemented by jquery. For example:

    $.extend(settings, options);

Merge settings and options, and return the merged result to settings, which is equivalent to options inheriting setting and saving the inherited result in setting.

    var settings = $.extend({}, defaults, options);

Merge defaults and options, and return the merged result to the setting without overwriting the default content. Can have multiple parameters (merge multiple items and return)

jQuery deletes items in the array

As mentioned in Tip 7, use the $.grep() method to delete elements in the array.

var array = ['a', 'b', 'c']; 
$.grap(array, function(value, index){return value=='b';}, true);

The above code will delete the element 'b' in the array.

jQuery array processing

$.each(obj, fn);

Traverse obj, obj is the array or object to be traversed; fn is the processing function, and the optional parameters are index and content, such as var fn = function(index, content){}; If you need to end the traversal, please return false, other return values ​​will be ignored.

　This method can be used to process JSON data objects.

$.inArray(obj, array);

　 Determine whether the obj object is contained in the array array. If it exists, return the corresponding subscript. If it does not exist, return -1;

$.map(array, fn);

　 Convert the elements in one array to another array. array is the array that needs to be converted, and fn is the processing function; the return value of this method is a new processed array.

$.merge(array1, array2);

　 Merge two arrays; copy the contents of array2 to array1 and return the result. The merge method will not remove duplicates. You need to use $.unique() to remove duplicates.

$.unique(array);

　 Remove duplicates from an array.

$.grep(array, fn, [invert]);

　 Filter the elements in the array; this method calls the fn method for each object in the array array;

　 invert optional parameter; if "invert" is false or not set, the function returns the array returned by the filter function true elements, when "invert" is true, the set of elements that return false in the filter function is returned.

　This method is often used to delete elements in an array

Remove the spaces at the beginning and end of the string

JS does not provide a trim function for us to remove the null characters in both sections of the string. This function has been extended in jQuery:

$ .trim(str): Remove whitespace characters at both ends of the string.

For example: $.trim(" hello, how are you? "); //Return "hello, how are you? "

Add events and remove events

It is very convenient to add events to a jQuery object :

$('#btn').click(fn);
$('#btn').bind('click', fn);

jQuery provides a mechanism to provide multiple handlers for events of an object. After we add a click event handler, we can continue to add it without overwriting the previous handler.

Remove the bound event subscription when the unbind method is called:

$('#btn').unbind();　　　　//将会移除所有的事件订阅
$('#btn').unbind('click')　　//将会移除click事件的订阅

Get an item in the jQuery object collection

For the obtained element collection, you can use eq or get to get an item (specified by index) (n) method or index number acquisition, please note that eq returns a jquery object, while get(n) and index return a dom element object. For jquery objects, you can only use jquery methods, and for dom objects, you can only use dom methods. For example, you want to get the content of the third

$("div").eq(2).html(); 　　　　 //调用jquery对象的方法
$("div").get(2).innerHTML; 　　//调用dom的方法属性

$("div")[0];　　　　//获取第一个Dom对象
$("div").get(0);　　//同样获取第一个Dom对象