jquery 杂记

时光怂恿深爱的人放手 提交于 2020-03-18 01:50:11

 

 


 

设置或返回元素的属性值:

       $("#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;
            }
}

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!