JQuery 入门学习记录

来源：互联网发布：pulse secure mac下载编辑：程序博客网时间：2024/05/21 17:17

1.remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。

用法:

$("span").remove(".red");$("span").empty();

2.ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。
此外，下列写法是相等的：
$(document).ready(function(){})等价于$(function(){});

$(document).ready(function(){    $("#btntest").bind("click", function () {        $("#tip").html("我被点击了！");    });});

3.bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：
$(selector).bind(event,[data] function)

参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。

$(function () {    $("#btntest").bind("click mouseout", function () {        $(this).attr("disabled", "true");    })});

4.hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：
$(selector).hover(over，out);
over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。

    <body>        <h3>hover()方法切换事件</h3>        <div>别走！你就是土豪</div>                <script type="text/javascript">            $(function () {                $("div").hover(                function () {                    $(this).addClass("orange");                },                function () {                    $(this).removeClass("orange")                })            });        </script>    </body>

5.toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：
$(selector).toggle(fun1(),fun2(),funN(),...)

其中，fun1，fun2就是多个函数的名称

click事件绑定示例：

$(function() {$("div").toggle(function() {$(this).html("Apple");},function() {$(this).html("Banana");},function() {$(this).html("Orange");})});

元素隐藏与显示切换示例：

<body><input id="btntest" type="button" value="点一下我" /><div>我是动态显示的</div><script type="text/javascript">$(function () {$("#btntest").bind("click", function () {$("div").toggle();})});</script></body>

6.unbind()方法可以移除元素已绑定的事件，它的调用格式如下：
$(selector).unbind(event,fun)

其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。

<body><input id="btntest" type="button" value="移除事件" /><div>土豪，咱们交个朋友吧</div><script type="text/javascript">$(function () {$("div").bind("click",function () {$(this).removeClass("backcolor").addClass("color");}).bind("dblclick", function () {$(this).removeClass("color").addClass("backcolor");})$("#btntest").bind("click", function () {$("div").unbind("click dblclick");$(this).attr("disabled", "true");});});</script></body>

0 0