发表更新前端技术 / 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()`：用新的文档替换当前文档。
  1. 若面使用了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>
  1. 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

许可协议

#

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

评论

关注我
×