jQuery 01

最新推荐文章于 2024-08-14 15:45:18 发布

白雾少年

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量790

点赞数

分类专栏： jQuery01 文章标签： jquery javascript java

本文链接：https://blog.csdn.net/m0_67258478/article/details/123558976

版权

jQuery01 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了jQuery的选择器和事件处理基础，包括基本选择器、过滤选择器和表单选择器的使用，并通过实例展示了如何通过jQuery获取和操作DOM元素，以及处理表单数据。此外，还演示了如何实现表格隔行变色和处理点击事件来获取用户输入。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript">
           //            window.οnlοad=function(){//页面加载函数
           //                //找到按钮
           //                var b=document.getElementById("btna");
           //                //给按钮添加点击事件匿名函数
           //                b.οnclick=function(){
           //                    //拿到文本框的值
           //                    var a=document.getElementById("aa").value;
           //                    alert(a);
           //                }
           //
           //            }
       </script>
       
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       
       <script type="text/javascript">
           //页面加载函数相当于window.onload
           $(function() {
               //                    var b=$("#btnb");//拿到按钮
               //                    b.click(function(){//添加点击事件
               //                        var a=$("#aa").val();//获取文本框的值
               //                        alert(a);
               //                    })
               // 二选择器
               //2.1基本选择器-层次选择器
               // $("#xx").css("background","yellow");//id选择器
               // $(".yy").css({"background":"yellow","color":"red"});//id选择器
               // $("div").css("background","yellow");//标签选择器=元素选择器
               // $("*").css("background","yellow");通配符所有页面元素
               //                    $("p,span").css("background","yellow");//并集
               //                    $("p span").css("background","yellow");//交集
               // $("div span").css("background","yellow");//交集所有的后代
               // $("div>span").css("background","yellow")//父子关系
               // $("p+span").css("background","yellow")//兄弟关系

               //2.3过滤选择器
               //                    $("ul>li:first").css("background","yellow");//第一个
               //                    $("ul>li:last").css("background","yellow");//最后一个
               // $("ul>li:eq(-1)").css("background","yellow");//倒数下一个
               //                    $("ul>li:even").css("background","yellow");//奇数下标偶数行
               //                    $("ul>li:odd").css("background","yellow");//偶数下标奇数行
               // $("ul>li:gt(0)").css("background","yellow");大于
               // $("ul>li:lt(4)").css("background","yellow");小于
               // $("ul>li:lt(4):gt(0)").css("background","yellow");先小于在大于

               //案列5：表格隔行换色
               //                    $("table tr:even").css("background","yellow");
               //                    $("table tr:odd").css("background","pink");

               // 2.4表单选择器
               $("#ok").click(function() {
                   //先拿性别
                   //                    var sex=$("#myForm input:radio:checked").val();
                   //                    console.info(sex);
                   //拿爱好
//                    $("#myForm input:checkbox:checked").each(function() {
//                        console.info($(this).val());
//拿地址
                   // })
                   var a= $("#myForm select option:selected").val();
                   console.info(a);

               })
           })
       </script>
   </head>
   <body>
       <h2>jQuery入门以及选择器</h2>
       <h3>一、入门</h3>
       <h4>点击按钮弹出文本框值(js与jQuery)</h4>
       <input type="text" id="aa" />
       <input type="button" value="点击(纯js法式)" id="btna" />
       <input type="button" value="点击(jQuery法式)" id="btnb" />
       <h3>二、选择器</h3>
       <h4>2.1基本选择器</h4>
       <div id="xx">
           <p>这是第一个div中的段落 <span>欧董：天下无敌</span></p>
           <span>大炮：睁开眼睛给我说话</span>
       </div>
       <div class="yy">
           这是第二个div
       </div>
       <p>这是外面的段落</p>
       <span>郑网红：我也想要当网红</span>
       <h4>2.3过滤选择器</h4>
       <ul>
           <li>0-aa</li>
           <li>1-bb</li>
           <li>2-cc</li>
           <li>3-dd</li>
           <li>4-ee</li>
       </ul>
       <h4>案列 5</h4>
       <table border="1px" width="50%">
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
       </table>
       <h4>2.4 表单选择器</h4>
       <form action="" id="myForm">
           性别：<input type="radio" value="男" name="sex">男
           <input type="radio" value="女" name="sex">女<br />
           爱好：<input type="checkbox" value="打豆豆" />打豆豆
           <input type="checkbox" value="打篮球" />打篮球
           <input type="checkbox" value="干饭" />干饭<br />
           地址：<select>
               <option value="湖南省">湖南省</option>
               <option value="广东省">广东省</option>
               <option value="湖北省">湖北省</option>
           </select><br />
           <input type="button" value="确定" id="ok">
       </form>
       <pre>
   </body>
</html>

白雾少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 01

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> // window.onload=function(){//页面加载函数 // ...
复制链接

扫一扫

专栏目录