java Web第一章学习内容（jquery转换对象，选择器）

最新推荐文章于 2024-07-11 16:03:52 发布

原创最新推荐文章于 2024-07-11 16:03:52 发布 · 203 阅读

CC 4.0 BY-SA版权

本文详细介绍了jQuery中的各种选择器用法，包括后代选择器、子选择器、相邻选择器、兄弟选择器等，并通过实例展示了如何使用这些选择器来操作DOM元素。

一.转换，获取节点对象

document要使用getId或则getName，getClass

参考代码：
var objDOM = document.getElementById("title");
objDOM=objDOM.innerHTML;

jQuery获取对象方法

参考代码：
$("#title").html(); //该方法等同于document的getid等方法

document转换为jQuery

参考代码：
var txtName = document.getElementById("txtName");

var $txtName = $(txtName);

二.选择器

/*后代选择器*/

$(".textRight P").css({"color":"red"});

/*子选择器*/

$(".textRight>p").css({"color":"blue"});

/*相邻选择器*/

$("h1+p").css({"color":"yellow"});

/*兄弟选择器*/
$("h1~p").css({"color":"pink"});


    /*标签选择器*/
     $("span").css({"color":"#FF0099","font-weight":"bold"});

/*属性选择器*/
$("span[title]").css({"font-weight":"bold"})

/*偶数，奇数选择器*/
$("tr:even").css({"background":"#eff7d1"});
$("tr:odd").css({"background":"#f7e195"});

/*hidden所有隐藏的元素*/
$("#show").click(function () {
$("p:hidden").show();
})

/*visible所有可见的元素*/
$("#hide").click(function () {
$("p:visible").hide();
})

    /*first      第一个元素*/
    /*not     不是相应元素*/

    /*lt     小于*/
    /*gt     大于*/
    /*eq     第几个元素*/

$("#play ol>li>span:first").css({"background":"#f0a30f"})
$("#play ol>li>span:not(:first)").css({"background":"#a4a3a3"})
$("#play ol>li:lt(5)").css({"background":"url(images/orange.jpg) right -4px no-repeat"});
$("#play ol>li:gt(4)").css({"background":"url(images/green.jpg) right -4px no-repeat"})
$("#play ol>li:eq(1)").css({"background":"url(images/green.jpg) right -4px no-repeat"})