JavaScript元素操作与样式修改-优快云博客

本文链接：https://blog.youkuaiyun.com/manx00/article/details/5768818

本文介绍了JavaScript中如何使用jQuery库实现元素的显示与隐藏、选择特定元素、修改元素样式等基本操作，包括通过标签名、ID、类名、表单元素及位置关系等条件进行元素的选择，并展示了如何修改元素的背景色、边框颜色、高度和宽度等样式属性。

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

$("p:contains('baa')").fadeOut("slow");       //内容含bba的<p>消失
        $("p").filter("#aa").fadeOut("slow");         //id为aa的<p>消失
        $("form").find("#in3").fadeOut("slow");     //form里面id为in3的消失
        $("body").find("div").fadeOut("slow");     //body里面的div消失
alert($("form").parent().is("body"));   //form的上一级是body，返回true
        $("input:eq(1)").next().addClass("red");   //和第一个input同级的下一个元素添加类red
        $("p").not("#aa").addClass("red");      //p元素数组中除了id为aa的其他都添加类red
        $("p").not("#aa ,#bb").addClass("red");  //p元素数组中除了id为aa,bb的其他都添加类red
        $("input").parents("#form1").addClass("red");    //id为form1的input的所有父元素添加red类
        $("img:eq(1)").prev().fadeOut("slow");   //第一张图片消失
        $("img").siblings().addClass("red"); //所有与img同级的元素加类red
        alert($("input:eq(1)").css("backgroundColor"));       //得到第二个input的背景色
        $("input:eq(2)").css({color:"pink",borderColor:"blue"});  //设置第三个input的多个风格
        $("input:eq(3)").css("borderColor","yellow");   //设置第四个input的背景色
        alert($("img:eq(0)").height());     //得到第一个图的高度
        $("img:eq(1)").height("5cm").width("5cm");   //设置第二个图的高度和宽度