jQuery中常见使用01

attr与prop的区别

  1. 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
  2. html符合w3c标签的属性，建议使用prop()来操作
  3. 用户自定义属性建议使用attr()来操作

去除前后空格 jQuery

1
2
3
// jQuery 去除前后端空格
console.log($.trim("111   去除前后空格  222") );
console.log($.trim("   去除前后空格  ") );

全选/取消

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery_artDialog</title>
    <script type="text/javascript" src="./jquery-1.5.2.min.js"></script>
    <script>
        // 方法一 ================================
        let selAll = function () {
            $("input[id*=cb_sel]").each(function () {
                $(this).attr("checked", true);
            });
        }
        let selCancel =function () {
            $("input[id*=cb_sel]").each(function () {
                $(this).attr("checked", false);
            });
        }
        // 方法二 ==================================
        let selHandle = function (that) {
            // 所有复选框 $("input[id*=cb_sel]")
            let allCheckbox = $("input[id*=cb_sel]")
            for (let i = 0; i < allCheckbox.length; i++) {
                if (allCheckbox[i].type === 'checkbox') {
                    if (that.checked) {
                        that.value = '1';
                        allCheckbox[i].checked = true;
                    }else {
                        that.value = '0';
                        allCheckbox[i].checked = false;
                    }
                }
            }
        }
    </script>
</head>
<body>
    <p><input name="fei00$cb_sel" type="checkbox" id="foo_fei00_cb_sel" value="001" />001</p>
    <p><input name="fei01$cb_sel" type="checkbox" id="foo_fei01_cb_sel" value="002" />002</p>
    <p><input name="fei02$cb_sel" type="checkbox" id="foo_fei02_cb_sel" value="003" />003</p>

    <p>
        <button onclick="selAll()">全选</button>
        <button onclick="selCancel()">取消</button>

        <label for="feiAll">
            <input type="checkbox" id="feiAll" onclick="selHandle(this)" value="0" />全选(取消)
        </label>
    </p>
</body>
</html>

常见操作

获取内容

1
$("#fk1").prop("outerHTML"); // 获取当前节点的html
1
2
$("#fk1").attr("src", "http://localhost/xbh/images/imgbtn_Date.jpg?aa=222");
$("#fk1").prop("outerHTML")

$.browser.msie

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
!!! 从jQuery1.9以前升级到jQuery1.9以后，因为$.browser.msie在1.9以后的jQuery中不存在了 !!!

<script type='text/javascript'>
    // $.browser.msie 用于判断浏览器内核
    $(function(){
         if($.browser.msie) {
            alert("IE浏览器");
         }else if($.browser.opera) {
            alert("opera浏览器");
         }else if($.browser.mozilla) {
            alert("火狐浏览器");
         }else if($.browser.safari) {
            alert("safari浏览器");
         }
    })
</script>

jQuery.browser.msie 由于jQ 版本引起的 undefined ,解决办法,在使用 jQuery.browser.msie代码的上方使用如下代码, 或者使用jquery-migrate库

1
jQuery.browser = {}; (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })();