常用的jQuery,JavaScript,CSS代码句,代码块
记录个人遇到的并且觉的经常复用的js,jquery
代码块。
公共
使用jQuery
首先引用jQuery
文件,如下示例:
1 | <script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script> |
设置和获取URL
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()
:用新的文档替换当前文档。
- 若面使用了
frameset
框架,获取指定页面的URL。window.parent.location.href;
,在内嵌页面获取父级页面的URL(当前URL)。
获取URL参数
示例URL: http://localhost/user/userView?account=admin&password=112233
使用正则表达式,传入属性名取值。
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>获取参数部分,使用切割方法,遍历数组以属性名/值方式存入对象,使用时通过该对象点出属性名取出属性值。
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>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方法
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内容
- 使用
console.log(data);
- 使用
JS
的for...in
语句,遍历对象属性返回属性名,根据属性名取值。 - 将对象转换为
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 | <script type="text/javascript"> |
json2.js序列化
使用json2.js
实现数据的序列化和返序列化。
- 引入JS:
<script type="text/javascript" src="/static/js/json2.js"></script>
- 序列化
var jsonObj = { account: 'admin', password: '112233' };
var jsonStr = JSON.stringify(jsonObj);
- 反序列化
JSON.parse(jsonStr);
常用的jQuery,JavaScript,CSS代码句,代码块
http://blog.gxitsky.com/2018/01/14/jQuery-commonsCodeOrMethod/