JQuery简单用法

最新推荐文章于 2024-07-04 12:16:35 发布
最新推荐文章于 2024-07-04 12:16:35 发布
阅读量150 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42989467/article/details/82152849
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>



    .myclass {
        background-color: red;
    }


</style>

</head>
<script type="text/javascript" src="../js/jQuery-1.12.4.js"></script>
<script>
    $(function(){
        $("#abc").mouseout(function(){
            $(this).attr("href","http://www.taobao.com");
        });
    });

    $(document).click(function(e){
        if(e.target.innerHTML == "基本选择器"){
            //alert("基本选择器");
            //jquery对象是对dom对象的封装
            //alert($("select").val());   //标签选择器
            //alert($(".class_1").length); //类选择器
            var $arr = $("input");
            var str = "";
            //jQuery
            $arr.each(function(i,dom){
                str+=dom.value+"\n";
            });
            alert(str);
        }else if(e.target.innerHTML == "层次选择器"){
            //alert($("form select").length);//选中form表单的子标签select
            //alert($("form>select").length);//选中form表单下直接子标签select
            //alert($("form+input").val());//选中form表单后紧挨着的标签input
            //alert($("form~input").length);//选中form表单后的同辈标签input 
        }else if(e.target.innerHTML == "过滤选择器"){
            //$("tr:first").css("background-color","blueviolet");
            //$("tr:last").css("background-color","rosybrown");
            //$("tr:eq(2)").css("background-color","yellow");
            //$("tr:gt(2)").css("background-color","blueviolet");
            //$("tr:lt(2)").css("background-color","blueviolet");
            //$("tr:not(tr:first)").css("background-color","blueviolet");
        }
        else if(e.target.innerHTML == "可见性选择"){
            $("#visit").mouseover(function(){
                $("ul:hidden").show(1000);
            });
            $("#visit").mouseout(function(){
                $("ul:visible").hide(1000);
            });
        }else if(e.target.innerHTML == "测试div"){
            //$("#mydiv").html("mydyv!!!");
            $("#mydiv").addClass("myclass");
        }


    });
</script>


<body>
    <a href="#">测试div</a>
    <div style="width: 300px; height: 200px;" id="mydiv"></div>
    <p></p>



    &lt;  &gt; 
    <hr />

    <a id="abc" href="http://www.baidu.com" onmouseover="changeAtt(this)">点击去百度</a>
<button >基本选择器</button>
<button >层次选择器</button>
<button >属性选择器</button>

<h1>测试标题</h1>
<br/>
<input type="text" id="input_1" value="开头"/>
<form>
    姓名：<input id="user" type="text" name="username" value="开头aaa"/>
     密码：<input id="pass" type= "password" name="password"/>
        <br/>
    性别：<input type="radio" value="man" />男
        <input class="class_1" id="woman" type="radio" value="woman" />女

    <select>
        <option id="one">一月</option>
        <option id = "two">二月</option>
        <option>三月</option>
        <option>四月</option>
    </select>
    <div>
        <select>
        <option id="one">一</option>
        <option id = "two">二</option>
        <option>三</option>
        <option>四</option>
    </select>

    </div>

    <br/>
    <a href="#" >这是一个A标签</a>
    <h5>这是h5标题</h5>
</form>

输入一：<input class="class_1" type="text" value="地球人"/>


<select>
        <option id="one">一</option>
        <option id = "two">二</option>
        <option>三</option>
        <option>四</option>
  </select>


<br/>

    文本：<p>美国大选</p>
    输入二：<input id="asdfw" class="class_1" type="text" value="这是输入二"/>
    <br/>
    <dl>
       <dt style="display:block">计算机</dt>
           <dd>用来计算的仪器 ... ...</dd>
           <dd>用来计算的仪器 ... ...</dd>      
    </dl>    
        <ol style="display:block" id="ol_1" >显示器
           <li>以视觉方式显示信息的装置 ... ...</li>
           <li>以视觉方式显示信息的装置 ... ...</li>
       </ol>      
    <hr/>
    <button >过滤选择器</button>
    <table  border="1px" width="500px">
    <tr>
        <td>a</td><td>b</td><td>c</td>
    </tr>
    <tr>
        <td>a</td><td>b</td><td>c</td>
    </tr>
    <tr>
        <td>a</td><td>b</td><td>c</td>
    </tr>
    <tr>
        <td>a</td><td>b</td><td>c</td>
    </tr>
    <tr>
        <td>a</td><td>b</td><td>c</td>
    </tr>
</table>




 <br/><button id="visit">可见性选择</button><br/>

 <div id="mydiv" style="background-color: skyblue;">
        <b>显示器:</b>
        <ul style="display:none" id="ul_1" >
           <li>以视觉方式显示---1111111111</li>
           <li>以视觉方式显示---2222222222</li>
       </ul>
    <br/>
       <b>java:</b>
       <ul style="display:block" id="ul_2">
            <li>javaSE</li>
            <li>javaEE</li>
            <li>javaME</li>
        </ul>
     <br/>
        <b>windows:</b>
        <ul style="display:none" id="ul_3">
            <li>windowsXP</li>
            <li>windows7</li>
            <li>windows8</li>
            <li>windows10</li>
        </ul>
 </div>
    <hr/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>



</body>
</html>
qq_42989467
关注
jQuery Migrate 插件用法实例详解
10-16
例如，从jQuery 1.x升级到3.x的过程中，`$.fn.size()`这个方法就被弃用了，推荐使用`.length`属性来获取元素的数量。然而，许多现有的代码库可能仍然依赖这些已废弃的函数，这就是jQuery Migrate发挥作用的地方。 ...
JQuery入门—编写一个简单的JQuery应用案例
10-27
学习JQuery要重点理解选择器的使用方法，因为选择器可以快速定位页面上的元素，并提供丰富的接口来操作这些元素。例如，可以使用`$('selector')`来选取元素，其中`selector`可以是元素的ID、类名、标签名或者复合...
JQuery的一些简单使用
CycloneKid的博客
02-28 360
一、使用JQ完成表格的隔行换色1.需求分析在页面加载的时候让显示用户的表格进行隔行换色显示，效果如下：使用JQ实现2.技术分析需要使用jquery的选择器(基本选择器、基本过滤选择器) 还需要使用jquery的CSS的方法(css(name,value)) 如果CSS样式已经由美工写好，此时可以使用jquery的CSS类操作3.步骤分析第一步：引入jquery的类库 第二步：直接写页面加载函数
jquery的简单用法 二
鲨鱼儿的博客
01-04 327
            本页内容： 八、js 数据交互方式：json数据类型                   json数据：一种可以跨语言的轻量级数据交互格式。             （1）json数据类型的写法：------ 类似python的字典              （2）json 数据的取值：用 . 的方式                          ...
jQuery 常用方法详解及示例
abments的博客
07-04 1448
jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 交互。本文将详细介绍 jQuery 的一些常用方法，并通过示例说明它们的使用方法。用于选择 DOM 元素。示例： 筛选出与选择器匹配的元素。示例： 移除与选择器匹配的元素。示例： 选择具有指定索引值的元素。示例： 2. 操作 DOM 元素 获取或设置元素的 HTML 内容。示例： 获取或设置元素的文本内容。示例： 获取或设置元素的属性。示例： 移除元素的属性。示例：
Jquery的一些基本用法
不懂love的博客
10-25 765
1、获取指定name的radio选定的值：var a=$("input[name='price']:checked").attr("value");2、获取指定id的html标签中的文本内容：var a=$("#aa").text();3、修改指定id的html标签中的内容,HTML代码也会以文本形式显示：$("#"+n).html('警告');4、保留小数点后的两位：a.toFixed(2);5
jquery基础用法总结
小曹的博客
03-03 2199
一、初始化 $(document).ready(function(){}); $(function(){}); $().ready(function(){}); js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行 只执行一次。 jQuery的入口函数 是在 html所有标签都加载之后，就回去执行。写几次执行几次。 js创建对象： ...
常见jquery用法
weixin_42121304的博客
05-04 533
&lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;function cxfOnload2(){ var xs=$(".out .sy_row4 li") function cxfOver(){ var temp=$("....
jQuery使用hide方法隐藏元素自身用法实例
12-03
在这个例子中，我们首先引入了jQuery库（`<script src="js/jquery.min.js"></script>`），确保可以使用jQuery的方法。然后，在`<script>`标签内，我们编写了JavaScript代码，这部分代码在文档加载完成时执行（通过`$...
jquery简单用法大全
05-25
**jQuery简单例子** 例如，使用jQuery实现点击按钮隐藏某元素： ```javascript $(document).ready(function() { $("#myButton").click(function() { $("#myElement").hide(); }); }); ``` 在这个例子中，当...
jQuery插件Tmpl的简单使用方法
10-24
JavaScript 也可以利用模版来解决这些问题，比如基于 jQuery 的 jquery.tmpl，现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里，内置的 demo 也尽情地演示了各种用法。
jQuery 基本用法积累
zsjehjun的博客
06-16 127
1、获取单选框选中选项的值： var new_statusId = $("#modifyOrderModal input[name=statusId]:checked").val(); 其中#modifyOrderModal是面板的名称，input[name=statusId]是单选框的名称 ...
jQuery基本语法
dichengpai8268的博客
10-12 738
一、jQuery基础1.为什么要用jquery？ 写起来简单，省事，开发效率高，兼容性好2、什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库（类似python里面的模块）3、如何使用jQuery？ 1、导入 <script src="jquery-3.2.1.js"></script> 或者<...
Jquery的基本使用
XiaoXiao_Lin的博客
09-28 1622
1、使用jQuery一定要引入jQuery库 2、jQuery中的$是一个函数 dom对象转化为jquery对象： 1、先有dom对象。2、$(DOM对象)就可以转化为jQuery对象 jQuery对象转化为dom对象： 1、先有jQuery对象。2、jQuery对象[下标]取出相应的DOM对象 核心函数的四个作用： 传入参数为[函数]时:在文档加载完成后执行这个函数 传入参数为[HTML字符串]时:根据这个字符串创建元素节点对象 传入参数为[选择器字符串]时:根据这个字符串查找元素节点对象.
几个简单的jQuery使用方法
热门推荐
JiaoJy
08-07 2万+
jQuery是JavaScript的一个集成库，语法简洁，它紧密集成了DOM，提供了方便的ajax的辅助方法、令人震撼的界面效果，以及可插拔的体系结构。 下面将介绍一些jQuery的关键特性：一、jQuery的安装： 1.本地引入。在jQuery官网下载jquery.js，在自己的文件中添加：<script src="jquery.js"></script>2.CDN引入，在文件中添加一下代码：
jquery的简单用法 一
鲨鱼儿的博客
12-27 2320
1、js 中 字符串 可以 与数字 进行加减 预算（原理：将数字转化为字符串进行拼接操作）   一、javascript的基本知识：      1、js 与 jquery的关系：                  jquery 只是 js 方便操作 html节点的 库。      2、DOM对象、DOM节点、jquery对象概念：       （1）DOM对象：            ...
c#实现俄罗斯方块，面向对象实现
09-15
俄罗斯方块（Tetris）是一款经典的益智游戏，由俄罗斯程序员阿列克谢·帕基特诺夫于1984年开发。游戏的主要目标是通过旋转和移动不同形状的方块（称为“砖块”或“Tetrominoes”），将它们填充到屏幕底部的水平行中。当一行被完全填满时，该行会消失，玩家将获得积分。 游戏特点： 砖块形状：游戏中有七种不同形状的砖块，每种砖块由四个方块组成。 下落机制：砖块从屏幕顶部逐渐下落，玩家需要快速做出决策。 得分系统：消除的行越多，得分越高，连续消除多行会获得额外分数。 难度递增：随着游戏进行，砖块下落的速度会逐渐加快，增加了游戏的挑战性。 文化影响： 俄罗斯方块不仅在游戏界取得了巨大的成功，还成为了流行文化的一部分，影响了许多后续的游戏设计。它的简单性和上瘾性使其成为了历史上最畅销的电子游戏之一。 版本与平台： 自发布以来，俄罗斯方块已经在多个平台上推出，包括家用游戏机、电脑、手机等，形成了众多不同的版本和变种。
5G网络优化案例：关于解决诺基亚5G 700M站点小区闪断问题解决.pdf
最新发布
09-15
这份文件是关于解决诺基亚5G 700M站点小区闪断问题的详细案例报告，主要内容和关键要点如下： 问题背景与初步分析： 问题描述：随着5G 700M网络建设的推进，诺基亚700M现网出现较多误码告警和小区闪断问题，故障比例明显高于其他厂家站点。 初步定位：通过归类法分析，发现绝大部分误码问题发生在烽火单芯双向光模块小区，占比高达95.65%。 故障根因深入探究： 光模块适配问题：初步认为烽火单纤双向光模块存在问题，但更换后问题依旧，进一步分析为光模块与诺基亚设备的适配问题。 深入测试与定位：选取5个长期误码小区进行深入分析，与烽火厂家合作对光模块进行程序升级，问题得到初步解决。 AUTOBYPASS机制分析： 机制介绍：烽火光模块采用25G模块速率兼容10G，并开启AUTOBYPASS（CPR自动旁路模式）功能。 影响分析：AUTOBYPASS机制与诺基亚设备不适配，导致交互失败和误码产生。关闭AUTOBYPASS后，CDR时钟校验和恢复周期缩短，交互频繁，误码问题消失。 解决方案与实施： 解决方案：针对所有使用此类光模块的诺基亚站点，通过优化升级烽火光模块，关闭AUTOBYPASS功
JQuery简易调用ASP.NET后台方法教程
- 前台使用jQuery的`.ajax()`函数，设置请求类型为`"Post"`，URL为包含`WebMethod`的方法路径（例如"data.aspx/SayHello"），并指定`contentType`为JSON格式。 - 在`success`回调中，可以通过`data.d`来访问返回的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值