设置或返回元素的属性值:
$("#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; } }
来源:https://www.cnblogs.com/wangyuman26/p/4689227.html