黑马程序员技术交流社区

标题: 【上海校区】JQuery的使用 [打印本页]

作者: 偷树的光头强 时间: 2018-9-27 11:14
标题: 【上海校区】JQuery的使用
一：JQuery入口函数
js：window.onload=function(...){}
jq：$(document).ready(function(){...});
$(function(){...});
1.两者功能都一致，都可以让获取元素的行为发生在渲染元素之后；
2.JS入口只允许存在一个，书写多个的话，后面的会覆盖前面的；
3.JQ入口允许存在多个，且并行存在，都会生效；
4.JS入口需要等待页面上所有资源加载完毕，而JQ入口只需要等待页面上标签渲染完毕即可，JQ入口速度更快。

二：事件
js：js对象.onclick= function(){...}jq：jquery对象.click(function(){...})
注意：jq中的事件类型统一不要加on
1.在jq里面，通过$()返回的数组，允许开发者整体操纵
2.选择数组中的其中一个元素：js对象[下标] jq对象.eq(下标)
举例：

[JavaScript] 纯文本查看 复制代码

<script src="js/jquery-3.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            // jQuery 书写 :

            var btns = $("input");

            // 可以整体操作, 给按钮绑定监听点击事件

            btns.click(function () {

                alert("按钮被点击了...");

            })

        })

    </script>

三：对象互转
1.JQ转JS对象

[JavaScript] 纯文本查看 复制代码

<script src="js/jquery-3.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            // jQuery 对象转为 JS 对象之后, 就可以使用 JS 语法.

            $("#btn").get(0).onclick = function () {

                alert("Hello jQuery对象转换为了 JS 对象, 方式一 ...");

            }

            $("#btn")[0].onclick = function () {

                alert("Hello jQuery对象转换为了 JS 对象, 方式一 ...");

            }

        })

    </script>

2.JS转JQ对象

[JavaScript] 纯文本查看 复制代码

<script src="js/jquery-3.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            // JS 转成 jQuery 对象之后, 就可以使用 jQuery 的语法

            var btn = document.getElementById("btn");

            // JS -> jQuery

            $(btn).click(function () {

                alert("Hello, JS对象转换成为 jQuery 对象 ...");

            })

        })

    </script>

四：JQ中DOM操作
1.新增节点

[HTML] 纯文本查看 复制代码

$(selector).append(content)                        在匹配元素内部最后面新增一个节点

$(content).appendTo(selector)                把新节点追加到匹配元素内部最后面（效果同append，只是书写上前后位置互换）

$(selector).prepend(content)                        在匹配元素内部最前面新增一个节点

$(content).prependTo(selector)                把新节点追加到匹配元素内部最前面（效果同prepend，只是书写上前后位置互换）

$(selector).after(content)                                在匹配元素同级之后新增一个节点

$(content).insertAfter(selector)                把新节点追加到匹配元素同级之后（效果同insertAfter，只是书写上前后位置互换）

$(selector).before(content)                        在匹配元素同级之前新增一个节点

$(content).insertBefore(selector)                把新节点追加到匹配元素同级之前（效果同insertBefore，只是书写上前后位置互换）

2.删除节点

[HTML] 纯文本查看 复制代码

remove()                删除节点，斩草除根，全部删除

empty()                        清空节点，斩草留根，只清空内部的东西，保留最外面的标签

3.替换节点

[HTML] 纯文本查看 复制代码

$(selector).replaceWith(content)          100%把旧的替换掉

五：JQuery中对象方法

[HTML] 纯文本查看 复制代码

Jq对象.each（function（index，element）{

        alert（index）;         //打印索引

        alert（element）; //打印集合对象中的每一个元素

}）

$(element).css('color','red');在使用的时候必须加选择器环境$()

JQuery中全局方法

[HTML] 纯文本查看 复制代码

$.each（jq对象，function（index,element）{

        alert(index);                 //打印索引

        alert(element);         //打印集合对象中的每一个元素

}）

六：JQuery中常用事件

1.绑定一个事件

[JavaScript] 纯文本查看 复制代码

jq对象.bind("事件类型"，响应函数);

$("btn").bind("click", function(){

    alert();

});

2.绑定多个事件

[JavaScript] 纯文本查看 复制代码

jq对象.bind({事件类型1:function(){},事件类型2:function(){}});

$("button").bind({

click:function(){},

mouseover:function(){},  

mouseout:function(){}  

});

3.指定事件的解绑

[JavaScript] 纯文本查看 复制代码

jq对象.unbind("事件类型");

jq对象.unbind("click");

4.解绑所有事件
jq对象.unbind();
5.事件的切换
hover(over,out) == mouseover+mouseout
注意：

[JavaScript] 纯文本查看 复制代码

Jq对象.hover(function(){

        //等同于mouseover事件，鼠标移入会执行

},function(){

        //等同于mouseout事件，鼠标移出会执行

})

[JavaScript] 纯文本查看 复制代码

Jq对象.hover(function(){

        //只写一个匿名函数，代表鼠标移入和移出分别执行一次这里的js语句

})

作者: 不二晨 时间: 2018-10-10 11:28
奈斯

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2