常用的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. 使用JSfor...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

许可协议

评论