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

Collection of common Jquery techniques_jquery

WBOY
Release: 2016-05-16 18:16:33
Original
950 people have browsed it

For example, there are disabling right clicks, hiding search text box text, opening links in new windows, detecting browsers, preloading images, etc. The details are as follows:
Prohibit right click

Copy code The code is as follows:

$(document ).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

Hide search text box text
Copy code The code is as follows:

$(document ).ready(function() {
$("input.text1").val("Enter your search text here");
textFill($('input.text1'));
} );
function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input .val()) == originalvalue ){ input.val(''); }
});
input.blur( function(){
if( $.trim(input.val() ) == '' ){ input.val(originalvalue); }
});
}

Open link in new window
Copy code The code is as follows:

$(document).ready(function() {
//Example 1: Every link will open in a new window
$('a[href^="http://"]').attr("target", "_blank");
//Example 2: Links with the rel= "external" attribute will only open in a new window
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
});
// how to use
open link

Detect browser
Note: In version jQuery 1.4, $.support replaced the $.browser variable.
Copy code The code is as follows:

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
// do something
}
// Target Safari
if( $.browser.safari ){
// do something
}
// Target Chrome
if( $.browser.chrome){
// do something
}
// Target Camino
if( $.browser.camino){
// do something
}
// Target Opera
if( $.browser. opera){
// do something
}
// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something
}
// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something
}
});

Preload images
Copy code The code is as follows:

$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[ i]);
}
};
// how to use
$.preloadImages("image1.jpg");
});

Page style switching
Copy code The code is as follows:

$(document).ready(function( ) {
$("a.Styleswitcher").click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$('link[rel=stylesheet]' ).attr('href' , $(this).attr('rel'));
});
// how to use
// place this in your header
< LINK href="default.css" type=text/css rel=stylesheet>
// the links
Default Theme
Red Theme
Blue Theme
});

The columns have the same height
If two CSS columns are used, this method can be used to make the heights of the two columns the same.
Copy code The code is as follows:

$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// how to use
$(document).ready(function() {
equalHeight($(".left"));
equalHeight($(".right"));
});
});

动态控制页面字体大小
复制代码 代码如下:

$(document).ready(function() {
// Reset the font size(back to default)
var originalFontSize = $('html').css('font-size');
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase the font size(bigger font0
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease the font size(smaller font)
$(".decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});

返回页面顶部功能
复制代码 代码如下:

$(document).ready(function() {
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' this.hash.slice(1) ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
// how to use
// place this where you want to scroll to

// the link
go to top
});

获得鼠标指针XY值
复制代码 代码如下:

$(document).ready(function() {
$().mousemove(function(e){
//display the x and y axis values inside the div with the id XY
$('#XY').html("X Axis : " e.pageX " | Y Axis " e.pageY);
});
// how to use

});

验证元素是否为空
复制代码 代码如下:

$(document).ready(function() {
if ($('#id').html()) {
// do something
}
});

替换元素
复制代码 代码如下:

$(document).ready(function() {
$('#id').replaceWith('
I have been replaced

);
});

jQuery延时加载功能
复制代码 代码如下:

$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});

移除单词功能
复制代码 代码如下:

$(document).ready(function() {
var el = $('#id');
el.html(el.html().replace(/word/ig, ""));
});

验证元素是否存在于jQuery对象集合中
复制代码 代码如下:

$(document).ready(function() {
if ($('#id').length) {
// do something
}
});

Make the entire DIV clickable
Copy the code The code is as follows:

$(document) .ready(function() {
$("div").click(function(){
//get the url from href attribute and launch the url
window.location=$(this). find("a").attr("href"); return false;
});
// how to use

});

Convert between ID and Class When changing the Window size, switch between ID and Class
Copy code The code is as follows:

$(document).ready(function() {
function checkWindowSize() {
if ( $(window).width() > 1200 ) {
$('body').addClass('large');
}
else {
$( 'body').removeClass('large');
}
}
$(window).resize(checkWindowSize);
});

Clone object
Copy code The code is as follows:

$(document).ready(function() {
var cloned = $('#id').clone();
// how to use

});

Center the element in the middle of the screen
Copy the code The code is as follows:

$ (document).ready(function() {
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2 $(window).scrollTop() "px");
this.css("left", ( $(window).width( ) - this.width() ) / 2 $(window).scrollLeft() "px");
return this;
}
$("#id").center();
});

Write your own selector
Copy the code The code is as follows:

$(document).ready(function() {
$.extend($.expr[':'], {
moreThen1000px: function(a) {
return $( a).width() > 1000;
}
});
$('.box:moreThen1000px').click(function() {
// creating a simple js alert box
alert('The element that you have clicked is over 1000 pixels wide');
});
});

Count the number of elements
Copy code The code is as follows:

$(document).ready(function() {
$(" p").size();
});

Use your own Bullets
Copy code The code is as follows:

$(document).ready(function() {
$("ul").addClass("Replaced");
$("ul > li").prepend("‒ ");
// how to use
ul.Replaced { list-style : none; }
});

Reference the jQuery class library on the Google host
Copy the code The code is as follows:

//Example 1


// Example 2:(the best and fastest way)


Disable jQuery (animation) effect
Copy code The code is as follows:

$(document ).ready(function() {
jQuery.fx.off = true;
});

Conflict resolution with other JavaScript libraries
Copy code The code is as follows:

$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
});
Related labels:
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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!