文档章节

jquery或javascript日常使用记录

上官胡闹
 上官胡闹
发布于 2016/03/24 21:14
字数 1233
阅读 101
收藏 0

根据值动态选中select

$("#myDropDown option:text=" + myText +"").attr("selected", "selected"); //jquery1.9-
$("#me option[value='"+num+"']").prop('selected', true);//推荐使用,jquery1.9+,ie不支持prop
$('#me').val(num).prop('selected', true);//经测试没有bug,推荐使用,jquery1.9+

原生javascript根据value动态选中

function setSelectChecked(selectId, checkValue){  
		var select = document.getElementById(selectId);  
		for(var i=0; i<select.options.length; i++){  
			if(select.options[i].value == checkValue){  
				select.options[i].selected = true;  
				break;  
			}  
		}  
}

获取select中被选中的option的text

$(".pur_level").find("option:selected").text();

获取select被选中option的value

$("#att_hour option[selected='selected']").val();
$("#att_hour option[selected='selected']").val();
$("#att_hour").find("option:selected").val();

清除select选中

$("#me").find('option').removeAttr("selected");
$("#up_sex").find("option:selected").attr("selected", false);//和第一种选中集合会有bug

获取radio的选中值

<input type="radio" name="querytype" value="1">

$('input[name="querytype"]:checked').val();

移除radio选中

$("input[name=querytype]").removeAttr('checked');

检测checkbox选中

<input type="checkbox" id="expireCheck" name="expireCheck" value="1">

$("#expireCheck").is(":checked")

checkbox设置选中和设置不选中

$("#expireCheck").attr("checked","true");//设置选中
$("#expireCheck").attr("checked",false);//设置不选中

对高版本的jquery,应该使用prop

$('#idCheckbox').prop('checked', true);
$('#idCheckbox').prop('checked', false);

根据数组值动态选中checkbox(注意数组中的每一项值需转化为string类型)

        /**
         * set checkbox checked by values
         * @param selectId
         * @param checkBoxName
         * @param valuesArr
         */
        setCheckedByValues:function(selectId,checkBoxName,valuesArr){
            $("#"+selectId).find(':checkbox[name="'+checkBoxName+'"]').each(function(){
                $(this).prop("checked", ($.inArray($(this).val(),valuesArr) != -1));
            });
        }

遍历某个容器内的input

$("#up_cost input").each(function () {
     var cost = $(this).val();
     var costTemp = cost.replace(/(^\s*)|(\s*$)/g,'');
     if(costTemp.length>0){
        var level = $(this).parent().prev().attr('id');
        var freestandObj = new freeStandards(cost,level);
        array.push(freestandObj);
     }
    
});

遍历某个容器内的checkbox

$("#checkboxContanier input[name='student']:checked").each(function () {
    if ($(this).val() !== null && $(this).val() !== "") {
       console.log($(this).val());
    }
});

使用window.location.href导出excel

var startTime = 12334444;
var endTime = 44444444444444;
var url = "/course/exportSche?startTime="
      + startTime + "&endTime=" + endTime;
window.location.href = url;

通过$.proxy绑定事件

this.$today = $("#today");
this.$today.off('click').on('click',$.proxy(this.todayClick,this));
Calendar.prototype.todayClick = function(event){
  $(event.currentTarget).val();//获取绑定元素的值
};

点击页面其他地方关闭目标元素

//click other element close combo-select
	$(document).on("click",function(e){           
            if($(e.target).closest(".combo-select").length == 0){
				$(".combo-dropdown").hide();
            }
        })

jvascript获取文件上传的url

var url = null;
if (window.createObjectURL != undefined) {
    url = window.createObjectURL(file);
} else if (window.URL != undefined) {
    url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
    url = window.webkitURL.createObjectURL(file);
}

文件类型判断:

ImgType: ["jpg", "png"]
RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())

juery 为子元素添加时间:

$(selector).delegate(childSelector,event,data,function)

jquery获取同胞元素:

$("p").siblings(".selected")

jquery清空表单

$('#myform').trigger("reset");//只能清空普通文本
$("#myform").find(":input").not(":button,:submit,:reset")
.val("").removeAttr("checked").removeAttr("selected");

或者

function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch(this.type) {
            case 'password':
            case 'select-multiple':
            case 'select-one':
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
        }
    });
}

或者封装组件

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};
//usage
$('#flightsSearchForm').clearForm();

使用原生javascript清空元素

function clearForm(ele) {

    tags = ele.getElementsByTagName('input');
    for(i = 0; i < tags.length; i++) {
        switch(tags[i].type) {
            case 'password':
            case 'text':
                tags[i].value = '';
                break;
            case 'checkbox':
            case 'radio':
                tags[i].checked = false;
                break;
        }
    }
   
    tags = ele.getElementsByTagName('select');
    for(i = 0; i < tags.length; i++) {
        if(tags[i].type == 'select-one') {
            tags[i].selectedIndex = 0;
        }
        else {
            for(j = 0; j < tags[i].options.length; j++) {
                tags[i].options[j].selected = false;
            }
        }
    }

    tags = ele.getElementsByTagName('textarea');
    for(i = 0; i < tags.length; i++) {
        tags[i].value = '';
    }
   
}
//usage:<input type="button" name="clear" value="Clear Form" onclick="clearForm(this.form);" >

jquery表单提交

// Using validation to check for the presence of an input
$( "#form" ).submit(function( event ) {
 
    // If .required's value's length is zero
    if ( $( ".required" ).val().length === 0 ) {
 
        // Usually show some kind of error message here
 
        // Prevent the form from submitting
        event.preventDefault();
    } else {
 
        // Run $.ajax() here
    }
});

普通表单上传文件

<form id="uploadForm">
	<label for="excel-file">excel文件导入:</label>
	<input id="excel-file" type="file" name="filename"  size="50"/>
	<button onclick="doUpload();">上传</button>
</form>

<script>
	function doUpload() {
		var formData = new FormData($( "#uploadForm" )[0]);
		$.ajax({
			url: '/importBrandSort' ,
			type: 'POST',
			data: formData,
			async: false,
			cache: false,
			contentType: false,
			processData: false,
			success: function (returndata) {
				//alert(returndata);
			},
			error: function (returndata) {
				//alert(returndata);
			}
		});
	}
</script>

#后台(spring mvc)
@RequestParam("filename") MultipartFile file

jquery移出事件绑定:

对于新的jquery版本最好使用off而非unbind

$(this).off("mousemove");

获取浏览器信息:

navigator.userAgent

禁止页面嵌套框架:

if (window.top !== window.self) {
    window.top.location = window.location;
}

禁止页面跳出框架

if (window == top) {
	location.href = 'Where are you go!';
}

页面session失效跳转

$(function(){
	$.ajaxSetup({  
	    contentType : "application/x-www-form-urlencoded;charset=utf-8",  
	    complete : function(xhr, textStatus) {  
	        if (xhr.status == 401) {
				//Unauthorized ,back to index
	            window.top.location = "../login";
	            return;  
	        }
	    }
	}); 
});

刷新页面

window.location.reload();

当前窗口的最顶层浏览器窗口

window.top

当前窗口最顶层浏览器窗口的文档

window.top.document

jquery实现拖拽的基本思路

使div的position为绝对定位absolute,然后控制其top与left值,需要监听鼠标事件,主要用到mousedown, mousemove, mouseup。 

在mousedown后,记录mousedown时鼠标与需要移动的div的位置,然后取得两者之差,得到在鼠标移动后,div的位置。即:

left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) 
top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始位置y值) 

拖拽到指定区域:原理就是在mouseup时将拖拽元素appendTo在指定区域

$(document).ready(function(){ 
var move=false;//移动标记 
var _x,_y;//鼠标离控件左上角的相对位置 
$(".drag").mousedown(function(e){ 
move=true; 
_x=e.pageX-parseInt($(".drag").css("left")); 
_y=e.pageY-parseInt($(".drag").css("top")); 
}); 
$(document).mousemove(function(e){ 
if(move){ 
var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置 
var y=e.pageY-_y; 
$(".drag").css({"top":y,"left":x}); 
} 
}).mouseup(function(){ 
move=false; 
}); 

 

© 著作权归作者所有

上官胡闹

上官胡闹

粉丝 59
博文 83
码字总数 59938
作品 1
成都
程序员
私信 提问
JS对象与Dom对象与jQuery对象之间的区别

前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 解......

苦水润喉
2018/08/16
0
0
jQuery零基础入门——(一)初识jQuery

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎来到我们新的课程。应部分读者的要求,为满足...

JandenMa
2018/06/29
113
3
高效的jQuery代码编写技巧总结

最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升。本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码。好的代码会带来速...

Jesons
2014/12/02
143
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
2018/07/20
12
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
62
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Alibaba 实战(二) - 关于Spring Boot你不可不知道的实情

0 相关源码 1 什么是Spring Boot 一个快速开发的脚手架 作用 快速创建独立的、生产级的基于Spring的应用程序 特性 无需部署WAR文件 提供starter简化配置 尽可能自动配置Spring以及第三方库 ...

JavaEdge
今天
7
0
TensorFlow 机器学习秘籍中文第二版(初稿)

TensorFlow 入门 介绍 TensorFlow 如何工作 声明变量和张量 使用占位符和变量 使用矩阵 声明操作符 实现激活函数 使用数据源 其他资源 TensorFlow 的方式 介绍 计算图中的操作 对嵌套操作分层...

ApacheCN_飞龙
今天
7
0
五、Java设计模式之迪米特原则

定义:一个对象应该对其他对象保持最小的了解,又叫最小知道原则 尽量降低类与类之间的耦合 优点:降低类之间的耦合 强调只和朋友交流,不和陌生人说话 朋友:出现在成员变量、方法的输入、输...

东风破2019
昨天
23
0
jvm虚拟机结构

1:jvm可操作数据类型分为原始类型和引用类型,因此存在原始值和引用值被应用在赋值,参数,返回和运算操作中,jvm希望在运行时 明确变量的类型,即编译器编译成class文件需要对变量进行类型...

xpp_ba
昨天
5
0
聊聊nacos Service的processClientBeat

序 本文主要研究一下nacos Service的processClientBeat Service.processClientBeat nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/core/Service.java public class Service ex......

go4it
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部