jQuery 即学即用 获取元素

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量98 收藏
点赞数
分类专栏： jQuery 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vowtre/article/details/83974360
版权 
<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function inJavascript()
    {
        var divs=document.getElementsByTagName("div");
        for(var i=0;i<divs.length;i++)
        {
            if(divs[i].getAttribute("className")=="testClass"||divs[i].getAttribute("class")=="testClass")
            {
                divs[i].style.color="red";                
            }                
        }
    }
    function inJquery()
    {
        $('div.testClass').css("color","red");
    }

</script>
</head>

<body>
    <div class="testClass">类名为testClass</div>
    <div class="testClass">类名为testClass</div>
    <div class="testClass">类名为testClass</div>
    <div>母div
        <div class="testClass">类名为testClass</div>
    </div>
    <div class="notTestClass">类名为noTestClass</div>
    <p class="testClass">类名为testClass的P标签</p>
    <input type="button" οnclick="inJavascript()" value="颜色"/>
    <input type="button" οnclick="inJquery()" value="颜色"/>
</body>
</html>

 

 

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function btn_click()
    {
        $("#test")
            .fadeIn(2000)
            .fadeOut(2000)        
    }    
</script>
<style type="text/css">
    #test
    {
        width : 100px;
        height : 100px ;
        background : yellow ;
        display : none ;
    }
</style>
</head>
<body>
    <div id="test">你好</div>
    <input type="button" value="渐入" οnclick="btn_click()"/>
</body>
</html>

  

   改变页面div内容

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function(){
        $("#testClick").click(function(){
            $("#test").html("您好！");
        });        
   });  
</script>
</head>
<body>
    <div id="testClick">单击此处</div>
    <div id="test">显示新内容</div>    
</body>
</html>

 

   动画效果

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn").click(function(){
            $("#test")
                .empty()                    //清空元素
                .animate({width:30})        //宽度增加30px
                .animate({height:30},1000)  //在一秒内将高度增加30px
                .animate({left:300})        //向右移动300px
                .animate({top:200})         //向下移动200px
                .animate({left:"-=300"})    //向左移动
                .animate({top:"-=200"})     //向上移动
                .animate({opacity:0.5})     //不透明度变为0.5
                .animate({width:300},2000)  //在2秒内将宽度增加300px
                .fadeOut()                  //渐出
                .slideDown()                //幻灯片点灭效果
                .slideUp()                  //幻灯片点亮效果
                .fadeIn("slow")             //渐入
                .animate({height:30},function(){//高度增加300px  
                    $(this).html("动画结束");   //动画结束显示文字
                })                    
        });
    });
</script>
<style type="text/css">
    #test
    {
        width : 100px;
        height : 100px ;
        background : yellow ;        
    }
</style>
</head>
<body>
    <div id="test"></div>
    <input id="btn" type="button" value="GO"/>
</body>
</html>

 

 

 

1. 操作 span 标签         $("span")

    通过id获取元素          $("#id")

    通过类名获取元素       $('.类名')   获取拥有同一类名的多个元素   类名就是class=""定义的

         

    指定层次关系 

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
       function f1()
       {
            $("form input").css("background","red");
       }
       function f2()
       {
            $("form > label").css("background","red");
       }
       function f3()
       {
            $("label + input").css("background","red");
       }
       function f4()
       {
            $("form ~ label").css("background","red");
       }
       function f5()
       {
            $("*").css("background","white");
       }
</script>
</head>
<body>
    <form>
        <label>子节点</label>
        <input type="text" value="背景变成红色">
        <fieldset>
            <label>孙节点</label>
            <input type="text" value="背景变成红色">
        </fieldset>
    </form>
    <label>form外</label>
    <input type="text" value="背景不变色">
    <fieldset>
            <label>form外</label>
            <input type="text" value="背景不变色">
    </fieldset>
    <input type="button" value="祖先,子孙" οnclick="f1()">
    <input type="button" value="父 > 子" οnclick="f2()">
    <input type="button" value="前+后" οnclick="f3()">
    <input type="button" value="兄~弟" οnclick="f4()">
    <input type="button" value="还原" οnclick="f5()">
</body>
</html>

 

    根据属性值获取元素

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
       function f1()
       {
            $("p[id]").css("color","red");
       }
       function f2()
       {
            $("div[id=div_test]").css("color","red");   
       }
       function f3()
       {
            $("p[id!=p_test2]").css("color","red");  
       }
       function f4()
       {
           $("p[id^=p]").css("color","red");
       }
       function f5()
       {
           $("p[id$=test2]").css("color","red");
       }
       function f6()
       {
           $("p[id*=test]").css("color","red");
       }
       function f7()
       {
            $("*").css("color","black");             
       }
</script>
</head>
<body>
    <div>div标签</div>
    <div id="div_test" class="class1">div标签</div>
    <p id="p_test1" class="class1">p标签</p>
    <p id="p_test2" class="class2">p标签</p>
    <p id="test3" class="class3">p标签</p>
    
    <input type="button" value="有指定属性" οnclick="f1()">
    <input type="button" value="有指定属性值" οnclick="f2()">
    <input type="button" value="不具有指定属性值" οnclick="f3()">
    <input type="button" value="属性值开始一致" οnclick="f4()">
    <input type="button" value="属性值结尾一致" οnclick="f5()">
    <input type="button" value="属性值包含" οnclick="f6()">
    <input type="button" value="还原" οnclick="f7()">
</body>
</html>

 

 

 

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
       $(document).ready(function(){
            $("input:text:enabled").val("能输入");
            $("input:text:disabled").val("不能输入");
            (function checkboxclick(){
                $(":checkbox").unbind("click",checkboxclick);
                var va1='';
                $(":checkbox:checked").each(function(){
                    va1+=$(this).val()+',';
                });
                $("#category").html("选择的数据:"+va1);
                $(":checkbox").click(checkboxclick);
            })();   
            $("select").change(function(){
                var txt='';
                $("select option:selected").each(function(){
                    txt+=$(this).text()+',';
                });
                $("#option").html("选择的选项:"+txt);
            });
        
       });       
</script>
</head>
<body>
    <form>
        <ul>
            <li>
                <label>订单号码</label>
                <input type="text" name="" disabled="disabled"/>
            </li>   
            <li>
                <label>订单所有者</label>
                <input type="text"/>
            </li>
            <li>
                <input type="checkbox" name="category" value="红"/><label>红</label>
                <input type="checkbox" name="category" value="黄"/><label>黄</label>
                <input type="checkbox" name="category" value="蓝"/><label>蓝</label>
                <input type="checkbox" name="category" value="紫"/><label>紫</label>
                <input type="checkbox" name="category" value="白"/><label>白</label>
            </li>
            <li>
                <select multiple="multiple">
                    <option>选项1</option>
                    <option>选项2</option>
                    <option>选项3</option>
                    <option>选项4</option>
                </select>
            </li>
        </ul>
    </form>
    <div id="msg">
        <p id="category"></p>
        <p id="option"></p>
    </div>
</body>
</html>

 

 

 

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
       $(document).ready(function(){
            $("p").slice(1,3).css("color","blue");
       });       
</script>
</head>
<body>
    <form>
        <p>p</p>    
        <p class="center">p</p>
        <p class="center">p</p>
        <p class="center">p</p>
        <p class="center">p</p>
        <p>p</p>
    </form>
    
</body>
</html>

 

 

 

 

 

 

vowtre
关注
专栏目录
jQuery实现获取元素索引值index的方法
10-21
在使用jQuery进行前端开发时，我们常常需要获取元素在集合中的索引值以便进行进一步的操作。jQuery作为一个强大的JavaScript库，提供了一系列方法来简化DOM操作，其中“.index()”方法便是用于获取元素索引值的一种...
jQuery初学（一）——关于如何获取网页中的元素
zZ_life的博客
02-02 880
PS:大部分源码来自慕课网，粘贴到html文件中可直接体验效果 要使用jQuery，只需要在head标签中加入如下一行： 根据id来操作元素： #id选择器 原来的内容 $("#test1").html("改变后的内容"); 通过$("
jquery siblings获取同辈元素用法实例分析
10-21
它允许开发者获取匹配集合中每个元素的同胞元素，即与指定元素处于同一父元素下的兄弟元素。本文将通过实例详细分析.siblings()的使用方法，同时涉及一些jQuery的其他相关知识。 首先，要使用.siblings()函数，需要...
jQuery实现获取绑定自定义事件元素的方法
10-23
本文将详细讲解如何使用jQuery实现获取绑定自定义事件元素的方法，以及涉及到的事件绑定和元素操作技巧。 首先，我们要理解jQuery的事件绑定机制。`$.fn.bind`是jQuery用于绑定事件处理函数的核心方法。默认情况下...
JQuery 获取Dom元素的实例讲解
10-19
在这篇关于JQuery获取DOM元素实例的讲解中，作者详细介绍了如何使用JQuery的函数来选取页面中的DOM元素。在前端开发中，DOM（文档对象模型）操作是基本功之一，而JQuery作为广泛使用的JavaScript库，为DOM操作提供了...
jQuery与javascript对照学习 获取父子前后元素 实现代码
10-29
接下来，我们将探讨如何使用纯JavaScript与jQuery来获取DOM元素的父子前后元素，并对照两者的不同之处。 首先，JavaScript和jQuery在获取相邻兄弟元素方面有所不同。 在JavaScript中，我们通常会使用`nextSibling`...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 868
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 514
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 459
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 885
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1320
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 374
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 270
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 219
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 619
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 727
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 299
echarts饼图内容循环播放实现
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 877
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
jQuery与JavaScript对比学习：获取父子前后元素
在JavaScript中，获取元素通常需要使用DOM方法，例如`getElementById`、`getElementsByTagName`、`querySelector`和`querySelectorAll`等。获取父子元素，可以使用`parentNode`属性来获取父元素，而`childNodes`或`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值