发表更新前端技术 / jQuery8 分钟读完 (大约1238个字)

常用的jQuery,JavaScript,CSS代码句,代码块

　　记录个人遇到的并且觉的经常复用的js,jquery代码块。

公共

使用jQuery首先引用jQuery文件，如下示例：

1
<script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>

设置和获取URL

  1. window.location对象获取当前页面 URL信息，可不使用window前缀。
    根据该对象的属信可以获取更详细的信息，也可设置信息。
    • alert(location); alert(document.URL);,输出 url 地址。
    • alert(location.href); ,输出完整 URL 地址。
    • location.href = '/admin/user/login?id=' + id;，页面跳转(设置URL值)。
    • document.referrer;,获取来源URL。
    • 属性：
      • host：从URL地址获取主机名(有端口则包含端口号)。
      • hostname：只获取主机名。
      • href：获取完整的URL。
      • pathname：获取URL路径部分。
      • port：从URL地址获取URL端口号。
      • protocol：获取URL的协议。
      • search：获取从问号(?)开始的URL(参数部分)。
    • 方法：
      • reload()：重新加载当前页面。默认没有参数，即为false，会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。若改变则从服务器下载文档。若未改变则从缓存中加载。与点击浏览器刷新按钮的效果一样。
      • assign()：加载新的文档。
      • replace()：用新的文档替换当前文档。
  2. 若面使用了frameset框架，获取指定页面的URL。
    • window.parent.location.href;，在内嵌页面获取父级页面的URL(当前URL)。

获取URL参数

示例URL: http://localhost/user/userView?account=admin&password=112233

  1. 使用正则表达式，传入属性名取值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script type="text/javascript">
    	$(document).ready(function() {
    		alert(getQueryString('account'));
    	});

    	function getQueryString(name) {
    		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    		var r = window.location.search.substr(1).match(reg);
    		if (r != null) {
    			return unescape(r[2]);
    		} else {
    			return null;
    		}
    	};
    </script>

  2. 获取参数部分，使用切割方法，遍历数组以属性名/值方式存入对象，使用时通过该对象点出属性名取出属性值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script type="text/javascript">
    	$(document).ready(function() {
    		alert(GetRequest().password);
    	});

    	function GetRequest() {
    		//获取url中从"?"开始的字串 
    		var url = location.search;
    		var theRequest = new Object();
    		if (url.indexOf("?") != -1) {
    			var str = url.substr(1);
    			strs = str.split("&");
    			for (var i = 0; i < strs.length; i++) {
    				theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    			}
    		}
    		return theRequest;
    	};
    </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63


    ### 获取标签的值 ###
    1. 根据 **class，id** 取 **input** 标签的 **value** 值 。
    	- jQuery:`$("#idName").val();`, `$(".className").val();`
    	- javaScript: `document.getElementById("idName").value;`
    2. 根据 **class，id** 获取标签之间的内容：如：**span,lable,div** 。
    	- jQuery: `$("#idName").html();`, `$("#idName").text();`, `$(".className").html();`, `$(".className").text();`
    	- javaScript : `document.getElementById("idName").innerHTML;`
    3. 获取`<select id='selectId'> <option value='selectValue'> ` 选中值：
    	- jQuery: `$("#selectId").val();`
    	- javaScript: `document.getElementById("selectId").value;`
    4. 获取`<img> `的 `src` 内容 ：
    	- jQuery: `$("#imgId")[0].src;`
    	- javaScript: `document.getElementById("imgId").src;`
    5. 子界面获取父界面元素内容：
    	- (标签间的内容 ，如span 、lable、div)
    		- JavaScript ： `window.parent.document.getElementById("currentPage").innerHTML;`
    		- JQuery     ： `$(window.parent.document).find("#IdName").text();`
    	- (取 input 标签的value 值） 
    		- JavaScript ： `window.parent.document.getElementById("currentPage").value;`
    		- JQuery     ： `$(window.parent.document).find("#IdName").val();`
    - 子界面控制父页面跳转：`window.parent.location.href = "*"` ；


    ### 给文本框或标签赋值 ###
    1. 给**input**标签赋值
    	- jQuery：`$('#idName').val('Hello');`
    	- JavaScript: `document.getElementById('idName').value = 'World';`
    2. 给**span, label, div**标签赋值
    	- JQuery：`$('#idName').html('Hello');`, `$('#idName').text('World');`
    	- JavaScript：`document.getElementById('idName').innerHTML = 'Hello';`, 	`document.getElementById('spanId').innerText = 'World';`


    ## jQuery ##
    ### 增/删Select的option项 ###
    1. `$("#select_id").append("<option value='Value'>Text</option>");` //为Select追加一个Option(下拉项)
    2. `$("#select_id").prepend("<option value='0'>请选择</option>");` //为Select插入一个Option(第一个位置)
    3. `$("#select_id option:last").remove();` //删除Select中索引值最大Option(最后一个)
    4. `$("#select_id option[index='0']").remove();` //删除Select中索引值为0的Option(第一个)
    5. `$("#select_id option[value='3']").remove();` //删除Select中Value='3'的Option
    5. `$("#select_id option[text='4']").remove();` //删除Select中Text='4'的Option


    ### 获取Select选中的值 ###
    1. jQuery方式：在标签添加`selectId`，使用jQuery将**selectId**绑定`change`事件。
    ​``` html
    <html>	
    	<script type="text/javascript">
    		$(function(){
    			$("#selectId").change(function(){
    				var selectVal = $('#selectId').val();
    				alert(selectVal)
    			});
    		});
    	</script>	
    	<body>
    		<select id="selectId" >
    			<option value="val1">val1</option>
    			<option value="val2">val2</option>
    		</select>
    	</body>
    </htlm>

  3. JavaScript方式：select标签添加onchange事件方法，在 js 方法里取值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
    	<script type="text/javascript">
    		function getSelectVal() {
    			var selectVal = $("#selectId").val();
    			var selectValue = document.getElementById("selectId").value;
    			alert(selectVal);
    		}
    	</script>	
    	<body>
    		<select id="selectId" onchange=getSelectVal()>
    			<option value="val1">val1</option>
    			<option value="val2">val2</option>
    		</select>
    	</body>
    </html>

JavaScript

JS方法

  1. split()方法
    将一个字符串分割为子字符串，返回字符串数组。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script type="text/javascript">
    	$(document).ready(function() {
    		splitMethod();
    	});
    	
    	function splitMethod(){
    		//常用此方法来对URL地址切割获取参数
    		var url = 'http://localhost/user/userView?account=admin&password=111';
    		var urlArr = url.split("?");
    		alert(urlArr);
    		alert(urlArr[1]);//取数组第2个值,索引从0开始。
    		var urlArr = url.split("?")[1];//取第2个值
    	}
    </script>

查看Object内容

  1. 使用console.log(data);
  2. 使用JS的for...in语句，遍历对象属性返回属性名，根据属性名取值。
  3. 将对象转换为JSON字符串。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script type="text/javascript">
    	$(document).ready(function() {
    		var obj = {account:'admin',passwd:'112233'};
    		//第一种
    		console.log(obj);
    		//第二种
    		for(i in obj){
    			alert(i);
    			alert(obj[i]);			
    		}
    		//第三种
    		alert(JSON.stringify(obj));
    	});
    </script>

动态生成下拉表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
	function getBStype() {
		var url = '/admin/join-chosetype';
		$.post(url, null, function(data) {
			var len = data.length;
			$("#bsType").find('option').remove();
			$("#bsType").append($('<option value=\'\'>' + "---请选择---" + '</option>'));
			for(i = 0; i < len; i++) {
				$("#bsType").append($('<option value=' + data[i].id + '>' + data[i].bsTypeName + '</option>'));
	//						alert(data[i].id + '....' + data[i].bsTypeName);
			}
	//					onsole.info(data);
			return;
		})
	}
</script>

json2.js序列化

使用json2.js实现数据的序列化和返序列化。

  1. 引入JS:<script type="text/javascript" src="/static/js/json2.js"></script>
  2. 序列化
    var jsonObj = { account: 'admin', password: '112233' };
    var jsonStr = JSON.stringify(jsonObj);
  3. 反序列化
    JSON.parse(jsonStr);

常用的jQuery,JavaScript,CSS代码句,代码块

http://blog.gxitsky.com/2018/01/14/jQuery-commonsCodeOrMethod/

作者

光星

发布于

2018-01-14

更新于

2022-07-07

许可协议

#

喜欢这篇文章？打赏一下作者吧

评论

关注我
×