Jquery--JS的函数包

116 阅读 0 评论 77 点赞

我是靠谱客的博主敏感溪流，这篇文章主要介绍Jquery--JS的函数包，现在分享给大家，希望可以做个参考。

Jquery-----JS的函数包，直接来调用方法。

一、基本知识

用法：把jquery-1.7.2.js直接复制到要做的网站项目中，拖拽引用和JS用法一样。

二、选择器

【1】基本：

1、取ID：var b= $("#div1");

var a = document.getElementById('div1'); 和 var b= $("#div1");是一样的

2、取class：$(".div");

3、取标签：$("div"); 直接打标记名

【2】组合：

1、并列取：用逗号隔开

2、后代取：用空格隔开

【3】过滤选择器：

1、基本过滤：

.首: $(".div:first").css("background-color","red");

.尾: $(".div:last").css("background-color","red");

.取任意一个（等于）：$(".div:eq(2)").css("background-color","red"); 2表示索引

.大于：$(".div:gt(2)").css("background-color","red");

.小于：$(".div:lt(2)").css("background-color","red");

.排除：$(".div:not(.div:eq(2))").css("background-color","red"); :not(选择器)

.奇：$(".div:odd").css("background-color","red");

.偶：$(".div:even").css("background-color","red");

2、属性过滤：

.属性名过滤：$(".div[id]").css("background-color","red");

.属性名值的过滤：[属性名=值] [属性名!=值]

3、内容过滤：

.文字：$(".div:contains('a')").css("background-color","red");

.子元素：$(".div:has("选择器")").css("background-color","red");

三、事件：

【常规事件】

1、单击：

$(".div").click(function () {
alert('aaa');
});

2、双击：

$(".div").dblclick(function () {
alert('aaa');
});

3、复合事件：

●hover(function(){},function(){});

列如：做光棒效果

$(".div").hover(function () {
$(this).css("background-color","red");
}, function () {
$(this).css("background-color", "white");
});

●toggle(function(){},function(){},........);点击事件循环执行

可以用来点击换图片，最后一个function(){} 不加逗号

$(".div").toggle(function () {
$(this).css("background-color", "red");
}, function () {
$(this).css("background-color", "blue");
}, function () {
$(this).css("background-color", "green");
}, function () {
$(this).css("background-color", "black");
}, function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "red");
});

●未来元素：对象.live("事件名",function(){});

【事件冒泡】阻止事件冒泡

$(".aaa").click(function () {
alert($(this).attr("id"));
return false;//阻止
});

四、DOM操作

【操作内容】

1、表单元素：

取值：var s=$("选择器").val()

赋值：$("选择器").val("值")

2、非表单元素：

取值：var s=$("选择器").html(), var s=$("选择器").text()

赋值：$("选择器").html("内容"), var s=$("选择器").text()

复制代码

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
<script type="text/javascript">
        $(document).ready(function () {      如果要放到head里必须写这条，一个页面只有一个

            $("#a").click(function () {
                $(this).text("bbbb");    点击aaaaa替换成bbbb
            });

            $("#btn1").click(function () {  点击按钮替换成bbbb
                $("#txt").val("aaaaaa");
                $(this).val("aaaaaa");
            });



        });


</script>
</head>
<body>
    <form id="form1" runat="server">
   <a id="a">aaaaa</a>
        <input type="text" id="txt" />
        <input type="button" value="btn1" id="btn1" />

    </form>

【操作属性】

1、获取属性

var s=$("选择器").attr("属性名")

2、设置属性

$("选择器").attr("属性名","属性值")

3、删除属性

$("选择器").removeAttr("属性名")

【操作样式】

1、操作内联样式

获取样式：var s=$("选择器").css("样式名")

设置样式：$("选择器").css("样式名","值")

2、操作样式表的class

添加class:$("选择器").addClass("class名")

移除class:$("选择器").removeClass("class名")

添加移除交替class:$("选择器").toggleClass("class名")

【操作相关元素】

1、查找

父、前辈：parent()、parents()

子、后代：children(选择器)-子级，find(选择器)-后代

兄弟：

prev（）上一个

prevAll(选择器)

next() 后面的一个元素

nextAll(选择器) 后面兄弟级的元素

2、操作：

新建：$("HTML字符串")

添加：appen(jquery对象) 内部添加，after(...)下部平级添加， before("...") 上部平级添加

移除：remove() 移除元素， empty() 清空内部全部元素

复制：clone()

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

复制代码

<%--

aaaaaa

wddddd

2016-10-19

--%>

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<style type="text/css">
        #boss {
        position:relative;
        width:70%;
        height:600px;
        left:15%;
        background-color:#e0e0e0;
        }
        #top {
        
        position:relative;
        width:80%;
        left:10%;
        height:30%;
        background-color:#0ff;
        overflow:hidden;/*超出部分隐藏*/
        }
        #txt1 {
        position:relative;
        width:100%;
        
        height:70%; 
        }
        #bottom {
        position:relative;
         width:80%;
        left:10%;
        height:70%;
        background-color:#ffd800;
        overflow:auto;/*出现滚动条*/
        }
        .item {
        position:relative;
        width:90%;
        left:5%;
       margin-top:10px;/*间距*/
        background-color:#00ff21;
        }
        .item_top {
        position:relative;
        width:80%;
        height:30px;
        left:10%;
        line-height:30px;/*字的行高*/
        border-bottom:1px solid black;/*底部加一条横实线*/
        }
        .item_txt {
         position:relative;
        width:80%;
      
        left:10%;
         word-break:break-all;/*文字内容自动换行*/
        
        }
        .item_bottom {
         position:relative;
        width:80%;
        height:30px;
        left:10%;
        line-height:30px;/*字的行高*/
        text-align:right;/*字在右边*/
        border-top:1px solid black;/*上部加一条横实线*/
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="boss">
<div id="top">
    <textarea id="txt1"></textarea>
    <input type="button" id="btn1" value="提交" />
</div>
        <div id="bottom">
           <%-- <div class="item">
                <div class="item_top">aaaaaa</div>
                <div class="item_txt">wddddd</div>
                <div class="item_bottom">
                    2016-10-19
                    <input type="button" value="删除" />
                </div>
            </div>--%>
        </div>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    $("#btn1").click(function () {
        var otxt = $("#txt1").val();/*点击按钮取出txt1*/
        var aa="<div class="item">";
        aa+="<div class="item_top">aaaaaa</div><div class="item_txt">";
        aa+=otxt;
        aa+="</div><div class="item_bottom">";     
        aa+="2016-10-19 <input type="button" value="删除"class="btn_del" /></div></div>";      
        // $("#bottom").append(aa);/*追加在下面*/

        if ($(".item").length <= 0) {/*打开一条也不显示，那取出追加上*/
            $("#bottom").append(aa);
        }
        else {
            $(".item").eq(0).before(aa);/*如果有追加在第一个的上面*/
        }
    });

    $(".btn_del").live("click",function () {/*删除*/
        $(this).parent().parent(). remove();/*清空*/
    });
</script>