JQuery 入门学习记录

最新推荐文章于 2024-08-09 02:16:38 发布

hx431993

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量232

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/hx431993/article/details/49451673

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>