jquery 杂记
设置或返回元素的属性值：
$("#imgId").attr('src'); // 获取元素的属性值
$("#imgId").attr('src',path); // 设置元素的属性值
$("#imgId").getAttribute(“src”) ; // getAttribute() 方法返回指定属性名的属性值。
用JQuery操作元素的style属性:
$("p").css("color"); //获取p元素的样式颜色
$("p").css("color","red"); //设置p元素的样式颜色为红色
$("#id").show(); //表示display:block,
$("#id").hide(); //表示display:none;
$("#id").toggle(); //切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$("#id").css('display','none');
$("#id").css('display','block');
判断是否隐藏显示：
.is(':visible') // 是否显示
is(":hidden") // 是否隐藏
获取元素的值、设置元素的值：
获取value值： $("#id").val()
设置value值： $("#id").val(“hello”)
form表单：
序列化表单值： $('#formid').serialize() 创建 URL 编码文本字符串。 如：name=aa&tel=13166666661
选择器：
通过类获取节点： $('.xz);
通过id获取节点：$('#xz);
选择器：
$("input[name=xxx][value=xxx]").val();
$(".demo li")
通配符：
$("input[id^='code']");//id属性以code开始的所有input标签
$("input[id$='code']");//id属性以code结束的所有input标签
$("input[id*='code']");//id 属性包含code的所有input标签
节点的：插入、复制、替换、删除 等操作：
添加节点：
append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容
$("p").append("<b>123</b>"); //向p元素中追加<b>节点，结果：<p> <b>123</b> </p>
$("<b>123</b>").appendTo("p"); //将<b>追加到p元素中
$("p").prepend("<b>123</b>"); //向p中前置<b>
$("<b>123</b>").prependTo("p"); //将<b>前置到p元素中
$("p").after("<b>123</b>"); //向p元素后插入<b>
$("<b>123</b>").insertAfter("p"); //将<b>插入到p元素后边
$("p").before("<b>123</b>"); //在p元素之前添加<b>
$("<b>123</b>").insertBefore("p"); //将<b>插入到p元素前面
删除节点：
var $li=$("ul li:eq(1)"). ();//删除ul节点中第2个元素节点
$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去
$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除
$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容
jquery 循环和遍历：
循环遍历元素节点：
$(".demo li").each(function(){
alert($(this).text())
});
循环遍历数组：
// 要提前把数组转换为json格式
var anArray = ['one','two','three'];
$.each(anArray,function(n,value){
alert(n);
alert(value);
}
// alert(n) 输出：0 1 2
// alert(value) 输出： one two three
var anObject = {one:1,two:2,three:3};//对json数组each
$.each(anObject,function(name,value) {
alert(name);
alert(value);
});
数组操作：
定义数组：
var a = new Array();
a[0] = 10;
a[1] = "aaa";
a[2] = 12.6;
循环数组：
var a = [1,2,3,4,5,6]; for(var i =0; i<a.length; i++){ alert(a[i]); }
数组的常用函数：
1、判断某元素是否在数组中 或 返回数组中指定元素的索引值
jQuery.inArray()方法： 用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1）
jQuery.inArray( value, array [, fromIndex ] )
if判断：
运算符要不支持and/or，要使用&&/||
if(val1 != '' && val1 < 100){
字符串处理：
把字符串中的某个字符全部替换：
var start = '11-11-21'; start = start.replace(/-/gm,''); alert(start);
获取上一个兄弟节点：prev()
获取下一个兄弟节点：next()
查找兄弟节点，不分前后：siblings() 例：this.siblings(".selected") 查找当前元素的所有类名为 "selected" 的所有同胞元素：
获取父节点：parent()
获取第一个子元素：children(":first") 或者 children(":eq(0)")
获取第二个子元素：children(":eq(1)")
$("div").children(".selected").css("color", "blue"); 找到类名为 "selected" 的所有 div 的子元素，并将其设置为蓝色：
$("div ul").children(":eq(1),:eq(7)").css("color","red");
删除节点：
//将class="carousel-inner"，子元素的class!='item active'的div节点全部删除 $(".carousel-inner").children("div[class!='item active']").remove();
jquery页面刷新：
$(function(){ //这是当文档载入完毕就执行的意思 $("#refresh").click(function(){ //页面加载时绑定按钮点击事件 window.location.reload();//刷新当前页面. }); });
jquery事件绑定：
方式一：当文档载入完毕，执行绑定
$(function(){ //这是当文档载入完毕就执行的意思 $(".check-list li").on("click",function(){ $(this).addClass("sel"); }) }); // 或者 $(document).ready(function() { //这是当文档载入完毕就执行的意思 $(".check-list li").on("click",function(){ $(this).addClass("sel"); }) }); // 推荐：ready里面执行的事件，整合放到一个function里面，这样的话，发布重新绑定事件（比如添加新元素时） $(document).ready(function() { //这是当文档载入完毕就执行的意思 xxxx（）；// 所有的事件，都放到这个function里面 });
方式二：将事件和函数绑定到元素
$('#travelmemberlogin').bind('keyup change blur',function () {
getTravelMemberInfo();
});
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
元素的显示：show()
元素的隐藏：hide()
正则表达式：
test() 方法用于检测一个字符串是否匹配某个模式.
如果字符串中有匹配的值返回 true ，否则返回 false。
例：判断手机号的格式：
var phone = /^1([38]\d|4[57]|5[0-35-9]|7[0135-8]|8[89])\d{8}$/; if(!phone.test($("#telephone").val())){ alert('用车联系人的电话格式不正确！'); }
当元素的值发生改变时，会发生 change 事件：
$('#renttype').change(function() {
…………
});
获取select选中的值：
$("#selectid option:selected").val();
或：var id = $(this).find("option:selected").val();
获取radio选中的值：
$("input[name='rd']:checked").val();
获取自定义data-*属性的值:
$("#awesome").data('myid');
通过获取jquery节点、获取值：
通过name获取节点： $("li[name='sheng']")
$("input[id='sheng']")
获取双标签之间的字符（html）：
document.getElementById('dialog').innerhtml="标签中的内容" （js实现）
$("#dialog").html("标签中的内容");
JQuery获取input type="text"中的值的各种方式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery获取文本框的值</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//使用id的方式获取 （切记：使用id获取节点的值时，代码中不能有id重名的，否则会失败！！！）
$(document).ready(function(){
//1
$("#button_text1").click(function(){
var result1 = $("#input_text1").val();
alert("result1 = " + result1);
});
//2
$("#button_text2").click(function(){
var result2 = $("input[id='input_text2']").val();
alert("result2 = " + result2);
});
//3
$("#button_text3").click(function(){
var result3 = $("input[id='input_text3']").attr("value");
alert("result3 = " + result3);
});
//4. 可以通过type的值来获取input中的值（未演示）
/*
$("#button_text4").click(function(){
var result4 = $("input[type='text']").val();
alert("result4 = " + result4);
});
*/
//5. 可以通过name的值来获取input中的值（未演示）
/*
$("#button_text5").click(function(){
var result5 = $("input[name='text']").val();
alert("result5 = " + result5);
});
*/
});
</script>
</head>
<body>
<!-- 获取文本框的值：方式一 -->
<div id="test1">
<input id="input_text1" type="text" value="test1" style="width: 100px;" />
<button id="button_text1">test1</button>
</div>
<!-- 获取文本框的值：方式二 -->
<div id="test2">
<input id="input_text2" type="text" value="test2" style="width: 100px;" />
<button id="button_text2">test2</button>
</div>
<!-- 获取文本框的值：方式三 -->
<div id="test3">
<input id="input_text3" type="text" value="test3" style="width: 100px;" />
<button id="button_text3">test3</button>
</div>
</body>
</html>
兼容性：
当不兼容360浏览器的极速模式时，以下面方式可以兼容：
1：有些浏览器不兼容onclick()事件，
$(document).ready(function() {
// 为下拉框绑定事件
$('#roleid').change(function () {
showcheckarea();
});
// 页面加载完成后也要执行一次
showcheckarea();
});
function showcheckarea() {
var roleid = $('#roleid option:selected').val();
if(roleid == 2) {
$('#checkprincipalarea').show();
}else {
$('#checkprincipalarea').hide();
$('#checkid').val("0");
}
}
代码判断：
$('select[name="select-commonappoint"]').change(function(){
var id = $(this).attr("id");
var selectval = $('#'+id+' option:selected').attr('value');
var appointfromid = ($('#'+id).prev()).prev().attr("id");
$('#'+appointfromid).attr('value',selectval);
});
jquery插件:
一：confirm 确认对话框按钮和链接
二 : jQuery弹出层插件 - layer
1-官网：http://layer.layui.com/
2-效果： 半透明的弹窗
3-使用方法：
第一步：把插件的压缩包放到项目目录
第二步：引入 <script type="text/javascript" src="/js/layer/layer.js"></script>
第三步：调用 （就这么简单，直接调用就可以了）
<script>
function xxx() {
layer.msg('xxx不能为空');
}
</script>
jquery获取第二个class：
var var1=$(this).attr("class");
var var2=var1.split(' ');
alert(var2[1]);
jquery 常用事件：
1、keyup 按键被按下，然后按键被松开并复位时触发。
// 当按下按键时，改变文本域的颜色 $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); });
2、onchange 事件会在域的内容改变时发生。
3、oninput 事件在value改变时实时触发（除IE之外的大多数浏览器支持的事件）
定时、周期：
setInterval() // 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() // 在指定的毫秒数后调用函数或计算表达式。
页面跳转：
location.href = "www.xxx.com";
四舍五入：
var num = 13.37;
alert(num.toFixed(1)); // 四舍五入，保留一位小数
输入：13.4
一个JS公告滚动效果：
https://blog.csdn.net/jklgfgdsr/article/details/87901898
alert 打印对象：
方法一：
将object变成可见的json格式的字符串。
即 alert(JSON.stringify(object));
方法二：
假设将对象赋给test，此时test是也是对象。 var test = object; 一、查看对象内容(一级对象)。 for(i in test ){ alert(i); //获得属性 alert(test[i]); //获得属性值 } 二、查看对象里的对象(二级及以上) for(i in test ){ alert(i); alert(test[i].toSource()); }
百度地图 - 已知经纬度，获取城市名称：
方法1：百度地图 =》 JavaScript API =》 逆地址解析服务：http://lbsyun.baidu.com/index.php?title=jspopular/guide/geocoding
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
<div id="l-map"></div>
<script>
var latitude = ""; // 纬度
var longitude = ''; // 经度
var map = new BMap.Map("l-map");
// 创建地理编码实例
var myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(longitude, latitude), function(result){
if (result){
// alert(JSON.stringify(result));
var res_city = result.addressComponents.city;
if(!res_city) {
// 默认城市
res_city = '临沂市';
}
alert(res_city);
}
});
</script>
方法2：百度地图 =》WEB 服务API =》正/逆地理编码服务 ：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding
hasClass() 方法检查被选元素是否包含指定的 class。
removeClass() 方法从被选元素移除一个或多个类。
addClass() 方法向被选元素添加一个或多个类。
判断身份证的格式： （身份证号：老的是15位，新的是18位）
function checkIdentity(identity){ var reg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/; if(reg.test(identity)){ return true; }else{ return false; } }
