Jquery基本选择器层次选择器过滤选择器表单选择器使用示例带注释

最新推荐文章于 2021-05-18 00:32:48 发布

smartsmile2012

最新推荐文章于 2021-05-18 00:32:48 发布

阅读量1.2k

点赞数

分类专栏： Web HTML & CSS JS & Jquery

本文链接：https://blog.youkuaiyun.com/smartsmile2012/article/details/8793938

版权

这篇博客详细介绍了jQuery的各种选择器的使用，包括基本选择器、层次选择器、过滤选择器和内容过滤选择器等，并给出了多个示例，帮助读者理解并掌握jQuery选择器的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery示例</title>
    <style type="text/css">
    #menu { 
	    width:300px; 
    }
    .has_children{
	    background : #555;
	    color :#fff;
	    cursor:pointer;
    }
    .highlight{
	    color : #fff;
	    background : green;
    }
    div{
	    padding:0;
    }
    div a{
	    background : #888;
	    display : none;
	    float:left;
	    width:300px;
    }
    </style>
    <!-- 引入 jQuery -->
    <script src="http://static.blog.youkuaiyun.com/scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        //等待dom元素加载完毕.
        $(document).ready(function () {
            $(".has_children").click(function () {
                $(this).addClass("highlight")			//为当前元素增加highlight类
			    .children("a").show().end()			//将子节点的a元素显示出来并重新定位到上次操作的元素
		    .siblings().removeClass("highlight")		//获取元素的兄弟元素，并去掉他们的highlight类
			    .children("a").hide(); 			//将兄弟元素下的a元素隐藏
            });

            //------------------------------------------------------------------
            //在一个id为table的表格的tbody中，如果每行最后一列中的checkbox没有被禁用
            //则把这行的背景设为红色
            $("#table>tbody>tr:has(td:last:has(:checkbox:enabled))").css("background", "red");
            //------------------------------------------------------------------
            var obj = $("#cr");  //jQuery对象
            obj.click(function () {
                if (obj.is(":checked")) { //jQuery方式判断是否选中
                    alert("感谢你的支持!你可以继续操作！");
                }
            })

            //-----------------------基本选择器----------------------------------
            // 所有的span元素和id为two的div元素
            $('#btn5').click(function () {