Home > Web Front-end > JS Tutorial > body text

JQ common DEMO

高洛峰
Release: 2016-11-04 16:45:27
Original
1166 people have browsed it

1 swap").each(function(i){wap_val[i] = $(this).val();$(this).focusin(function(){

if ($(this).val() = = swap_val[i]) {

$(this).val("");
}
}).focusout(function(){
if ($.trim($(this).val()) == " ") {
$(this).val(swap_val[i]);
}});});


2:


var el = $('#id');
el.html(el .html().replace(/word/ig, ''));

3:

$('button.someClass').live('click', someFunction);

//Note that in jQuery In 1.4.2, the delegate and undelegate options
// were introduced instead of live as they provide better context support

// For example, in the case of tables, previously you would use

//.live()$( "table").each(function(){$("td", this).live("hover", function(){

$(this).toggleClass("hover");

});
} );
//Now use
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});


4 :


How to dynamically add created elements to the DOM:

var newDiv = $('');

newDiv.attr('id','myNewDiv').appendTo('body');

5:

var cloned = $('#somediv').clone();

6:

if($(element).is(':visible') == ' true') {

//The element is visible

}

7:

JQ positioning

jQuery.fn.center = function () {

this.css('position',' absolute'); this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');

this. css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');

return this;

}

/ /Use the above function like this:

$(element).center();

8:

How to put the values ​​of all elements with a specific name into an array:

var arrInputValues = new Array();

$("input[name='table[]']").each(function(){

arrInputValues.push($(this).val());});

9:


How to use .siblings() in jQuery to select sibling elements

$('#nav li').click(function(){

$('#nav li').removeClass ('active');$(this).addClass('active');});

//The alternative is

$('#nav li').click(function(){

$(this) .addClass('active').siblings().removeClass('active');

});




10:


positive and negative selection

var tog = false;

$('a' ).click(function() { $("input[type=checkbox]").attr("checked",!tog);

tog = !tog;

});

11:

How to get the mouse pad cursor position x and y

$(document).ready(function() {

$(document).mousemove(function(e){

$('#XY').html("X Axis: ” + e.pageX + ” | Become clickable$("ul li").click(function(){

window.location=$(this).find("a").attr("href");

return false;

} );



13:

How to check if the image has been fully loaded

$('#theImage').attr('src', 'image.jpg').load(function() {

alert ('This Image Has Been Loaded');});

14:


How to check if cookies are enabled

var dt = new Date();

dt.setSeconds(dt.getSeconds() + 60) ;

document.cookie = "cookietest=1; expires=" + dt.toGMTString();var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;if(!cookiesEnabled) {

/ /No cookies enabled

}



15;

How to expire cookies:

var date = new Date();

date.setTime(date.getTime() + (x * 60 * 1000)) ;

$.cookie('example', 'foo', { expires: date });



Related labels:
JQ
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template