jQuery01

最新推荐文章于 2024-07-19 12:58:53 发布

YL-IP.man

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量602

点赞数 1

文章标签： jquery javascript java

本文链接：https://blog.csdn.net/qq_65186994/article/details/123560331

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>jQuery入门及选择器</title>
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           /* window.οnlοad=function(){
           //先找到id
           var b=document.getElementById("btna");
           //给按钮增加点击事件
           b.οnclick=function(){
           //拿文本框的值
           var a=document.getElementById("aa").value;
           alert(a);
           }
       } */

           //页面加载函数相当于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");//并集
               // $("div span").css("background","yellow");//交集所有的后代
               // $("div>span").css("background","yellow");//父子关系
               // $("div 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: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();
//                    alert(sex);
                   //拿爱好
                   /* $("#myForm input:checkbox:checked").each(function(){
                       alert($(this).val());
                   }) */
                   var address=$("#myForm select option:selected").val();
                   console.info(address);

               })


           })
       </script>
   </head>
   <body>
       <h2>jQuery入门及选择器</h2>
       <h3>一丶入门</h3>
       <h4>1.1 点击按钮弹出文本框的值(js对比jQuery)</h4>
       <input type="text" name="" id="aa" value="" />
       <input type="button" name="" id="btna" value="点击(纯js方式)" />
       <input type="button" name="" id="btnb" value="点击(jQuery方式)" />
       <h3>二丶选择器</h3>
       <h4>2.1 2.2基本选择器层次选择器 </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-席大炮好s</li>
           <li>1-网红明bt</li>
           <li>2-欧阳建敏nc</li>
           <li>3-王俊nt</li>
           <li>4-王俊sd</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>
       </table>
       <h4>2.5表单选择器</h4>
       <form action="" method="" id="myForm">
           性别<input type="radio" name="sex" id="" value="男" />男
           <input type="radio" name="sex" id="" value="女" />女<br>
           爱好<input type="checkbox" name="" id="" value="打豆豆" />打豆豆
           <input type="checkbox" name="" id="" value="干饭" />干饭
           <input type="checkbox" name="" id="" value="打球" />打球<br>
           地址
           <select>
               <option value ="湖南省">湖南省</option>
               <option value ="广西省">广西省</option>
               <option value ="广东省">广东省</option>
           </select><br>
           <input type="button" name="" id="ok" value="确定" />
       </form>

       <pre>

</pre>

</body>
</html>

YL-IP.man

关注

1
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>jQuery入门及选择器</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <scr...
复制链接

扫一扫

jQuery01

“相关推荐”对你有帮助么？