- 修改jQuery默认编码(例如默认UTF-8改成改GB2312)
- $.ajaxSetup({
- ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}
- });
- 解决jQuery, prototype共存,$全局变量冲突问题
- <script src="prototype.js"></script>
- <script src="http://blogbeta.blueidea.com/jquery.js"></script>
- <script type="text/javascript">
- jQuery.noConflict();
- </script>
注意:一定要先引入prototype.js 再引入jquery.js,先后顺序不可错。
- jQuery 判断元素上是否绑定了事件
- var $events = $("#foo").data("events");
- if( $events && $events["click"] ){
-
- }
- 如何使用jQuery来切换样式表
- $('link[media='screen']').attr('href', 'alternative.css');
- 如何限制选择范围(基于优化目的):
- var in_stock = $('#shopping_cart_items input.is_in_stock');
-
- <ul id="shopping_cart_items">
- <li><input type="radio" value="Item-X" name="item" class="is_in_stock" /> Item X</li>
- <li><input type="radio" value="Item-Y" name="item" class="3-5_days" /> Item Y</li>
- <li><input type="radio" value="Item-Z" name="item" class="unknown" /> Item Z</li>
- </ul>
- 如何正确地使用toggleClass:
- a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
- a.toggleClass('blueButton');
- 如何设置IE特有的功能:
- 如何使用jQuery来代替一个元素:
- $('#thatdiv').replaceWith('fnuh');
- 如何验证某个元素是否为空:
- if (! $('#keks').html()) {
- }
-
- if ($('#keks').is(":empty")) {
- }
- 如何从一个未排序的集合中找出某个元素的索引号
- $("ul > li").click(function () {
- var index = $(this).prevAll().length;
- });
- 如何把函数绑定到事件上:
- $('#foo').click(function(event) {
- alert('User clicked on "foo."');
- });
-
- $('#foo').bind('click', {test1:"abc", test2:"123"}, function(event) {
- alert('User clicked on "foo."' + event.data.test1 + event.data.test2 );
- });
- 在创建元素时,如何使用对象字面量(literal)来定义属性
- var e = $("", { href: "#", class: "a-class another-class", title: "..." });
- 如何使用多个属性来进行过滤
- var elements = $('#someid input[type=sometype][value=somevalue]').get();
- 如何使用jQuery来预加载图像:
- jQuery.preloadImages = function() {
- for(var i = 0; i < arguments.length; i++) {
- $("<img />").attr('src', arguments[i]);
- }
- };
- $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
- 如何为任何与选择器相匹配的元素设置事件处理程序:
- $('button.someClass').live('click', someFunction);
- $("table").each(function(){
- $("td", this).live("hover", function(){
- $(this).toggleClass("hover");
- });
- });
- $("table").delegate("td", "hover", function(){
- $(this).toggleClass("hover");
- });
- 如何找到一个已经被选中的option元素:
- $('#someElement').find('option:selected');
- 如何隐藏一个包含了某个值文本的元素:
- $("p.value:contains('thetextvalue')").hide();
- 如何创建嵌套的过滤器:
- .filter(":not(:has(.selected))")
- 如何检测各种浏览器:
- 检测Safari (if( $.browser.safari)),
- 检测IE6及之后版本 (if ($.browser.msie && $.browser.version > 6 )),
- 检测IE6及之前版本 (if ($.browser.msie && $.browser.version <= 6 )),
- 检测FireFox 2及之后版本 (if ($.browser.mozilla && $.browser.version >= '1.8' ))
- 任何使用has()来检查某个元素是否包含某个类或是元素:
- $("input").has(".email").addClass("email_icon");
- 如何禁用右键单击上下文菜单:
- $(document).bind('contextmenu',function(e){
- return false;
- });
- 如何定义一个定制的选择器
- $.expr[':'].mycustomselector = function(element, index, meta, stack){
- $('.someClasses:test').doSomething();
- 如何检查某个元素是否存在
- if ($('#someDiv').length) {
- }
- 如何使用jQuery来检测右键和左键的鼠标单击两种情况:
- $("#someelement").live('click', function(e) {
- if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
- alert("Left Mouse Button Clicked");
- } else if(e.button == 2) {
- alert("Right Mouse Button Clicked");
- }
- });
- 如何替换串中的词
- var el = $('#id');
- el.html(el.html().replace(/word/ig, ''));
- 如何在一段时间之后自动隐藏或关闭元素(支持1.4版本):
- setTimeout(function() {
- $('.mydiv').hide('blind', {}, 500)
- }, 5000);
- $(".mydiv").delay(5000).hide('blind', {}, 500);
- 如何限制“Text-Area”域中的字符的个数:
- jQuery.fn.maxLength = function(max){
- return this.each(function(){
- var type = this.tagName.toLowerCase();
- var inputType = this.type? this.type.toLowerCase() : null;
- if(type == "input" && inputType == "text" || inputType == "password"){
-
- this.maxLength = max;
- } else if(type == "textarea"){
- this.onkeypress = function(e){
- var ob = e || event;
- var keyCode = ob.keyCode;
- var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
- return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
- };
- this.onkeyup = function(){
- if(this.value.length > max){
- this.value = this.value.substring(0,max);
- }
- };
- }
- });
- };
- $('#mytextarea').maxLength(500);
- 如何jQuery注册和禁用jQuery全局事件
- $(document).ajaxStart(function(){
- $("#background,#progressBar").show();
- }).ajaxStop(function(){
- $("#background,#progressBar").hide();
- });
- 如何在jQuery中克隆一个元素:
- var cloned = $('#somediv').clone();
- 在jQuery中如何测试某个元素是否可见
- if($(element).is(':visible')) {
-
- }
- 如何把一个元素放在屏幕的中心位置:
- jQuery.fn.center = function () {
- return this.each(function(){
- $(this).css({
- position:'absolute',
- top, ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + 'px',
- left, ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + 'px'
- });
- });
- }
- $(element).center();
- 如何把有着某个特定名称的所有元素的值都放到一个数组中:
- var arrInputValues = new Array();
- $("input[name='xxx']").each(function(){
- arrInputValues.push($(this).val());
- });
- 如何从元素中除去HTML
- (function($) {
- $.fn.stripHtml = function() {
- var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
- this.each(function() {
- $(this).html( $(this).html().replace(regexp,'') );
- });
- return $(this);
- }
- })(jQuery);
- $('p').stripHtml();
- 如何使用closest来取得父元素:
- $('#searchBox').closest('div');
- 如何使用Firebug和Firefox来记录jQuery事件日志:
- jQuery.log = jQuery.fn.log = function (msg) {
- if (console){
- console.log("%s: %o", msg, this);
- }
- return this;
- };
- $('#someDiv').hide().log('div hidden').addClass('someClass');
- 如何强制在弹出窗口中打开链接:
- $('a.popup').live('click', function(){
- var newwindow = window.open($(this).attr('href'),'','height=200,width=150');
- if (window.focus) {
- newwindow.focus();
- }
- return false;
- });
- 如何强制在新的选项卡中打开链接:
- $('a.newTab').live('click', function(){
- var newwindow=window.open(this.href);
- $(this).target = "_blank";
- return false;
- });
- 在jQuery中如何使用.siblings()来选择同辈元素
- $('#nav li').click(function(){
- $('#nav li').removeClass('active');
- $(this).addClass('active');
- });
- $('#nav li').click(function(){
- $(this).addClass('active').siblings().removeClass('active');
- });
- 如何切换页面上的所有复选框:
- var tog = false;
- $('a').click(function() {
- $("input[type=checkbox]").attr("checked",!tog);
- tog = !tog;
- });
- 如何基于一些输入文本来过滤一个元素列表:
- $('.someClass').filter(function() {
- return $(this).attr('value') == $('input#someId').val();
- })
- 如何获得鼠标垫光标位置x和y
- $(document).ready(function() {
- $(document).mousemove(function(e){
- $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
- });
- });
- 如何扩展String对象的方法
- $.extend(String.prototype, {
- isPositiveInteger:function(){
- return (new RegExp(/^[1-9]\d*$/).test(this));
- },
- isInteger:function(){
- return (new RegExp(/^\d+$/).test(this));
- },
- isNumber: function(value, element) {
- return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));
- },
- trim:function(){
- return this.replace(/(^\s*)|(\s*$)|\r|\n/g, "");
- },
- trans:function() {
- return this.replace(/</g, '<').replace(/>/g,'>').replace(/"/g, '"');
- },
- replaceAll:function(os, ns) {
- return this.replace(new RegExp(os,"gm"),ns);
- },
- skipChar:function(ch) {
- if (!this || this.length===0) {return '';}
- if (this.charAt(0)===ch) {return this.substring(1).skipChar(ch);}
- return this;
- },
- isValidPwd:function() {
- return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this));
- },
- isValidMail:function(){
- return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));
- },
- isSpaces:function() {
- for(var i=0; i<this.length; i+=1) {
- var ch = this.charAt(i);
- if (ch!=' '&& ch!="\n" && ch!="\t" && ch!="\r") {return false;}
- }
- return true;
- },
- isPhone:function() {
- return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this));
- },
- isUrl:function(){
- return (new RegExp(/^[a-zA-z]+:\/\/([a-zA-Z0-9\-\.]+)([-\w .\/?%&=:]*)$/).test(this));
- },
- isExternalUrl:function(){
- return this.isUrl() && this.indexOf("://"+document.domain) == -1;
- }
- });
- 如何规范化写jQuery插件:
- (function($){
- $.fn.extend({
- pluginOne: function(){
- return this.each(function(){
-
- });
- },
- pluginTwo: function(){
- return this.each(function(){
-
- });
- }
- });
- })(jQuery);
- 如何检查图像是否已经被完全加载进来
- $('#theImage').attr('src', 'image.jpg').load(function() {
- alert('This Image Has Been Loaded');
- });
- 如何使用jQuery来为事件指定命名空间:
- $('input').bind('blur.validation', function(e){
-
- });
- $('input').data('validation.isValid', true);
- 如何检查cookie是否启用
- 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) {
-
- }
- 如何让cookie过期:
- var date = new Date();
- date.setTime(date.getTime() + (x * 60 * 1000));
- $.cookie('example', 'foo', { expires: date });
- 如何使用一个可点击的链接来替换页面中任何的URL
- $.fn.replaceUrl = function() {
- var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
- return this.each(function() {
- $(this).html(
- $(this).html().replace(regexp,'<a href="$1">$1</a>')
- );
- });
- }
- $('p').replaceUrl();
posted @
2016-01-08 09:42
java高级技术汇
阅读(
201)
评论()
编辑
收藏
举报