【无标题】

最新推荐文章于 2024-07-16 16:43:05 发布

陨落.190

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量34

点赞数

文章标签： jquery javascript linq

本文链接：https://blog.csdn.net/weixin_65795413/article/details/123567052

版权

jquery-<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>jquery入门以及选择器</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(){
               //案例1
               /* var b=$("#btnb");//拿到按钮
               b.click(function(){
                   var a=$("#aa").val();//获取文本框的值
                   alert(a);

               }) */
               //2 选择器
               //2.1基本选择器
               // $("#xx").css("background","yellow" )//id选择器
               // $(".yy").css({"background":"yellow","color":"red" })
           // $("div").css("background","yellow" )//标签选择器=元素选择器
               // $("*").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 address=$("#myForm select option:selected").val();
               console. info(address);

           })

           })

       </script>
   </head>
   <body>
       <h2>jquery入门以及选择器</h2>
       <h3>1,入门</h3>
<h4>1.1 点击按钮弹出文本框的值</h4>
       <input type="text" id="aa"/>
       <input type="button" value="点击(纯js方式)" id="btna"/>
       <input type="button" value="点击(jquery方式)" id="btnb"/>
   <h3>2.选择器</h3>
       <h4>2.1-2.2 基本选择器&层次选择器</h4>
       <div id="xx">
           <p>这是第一个div <span>欧：fjsgf </span></p>
           <span>大炮：sjahwdd</span>
       </div>
       <div class="yy">
           这是第二个div
       </div>
       <p>这是外面的div</p>
       <span>小炮：sjahwdd</span>
       <h4>2.3过滤选择器</h4>
       <ul>
           <li>0-a</li>
           <li>1-ab/li>
           <li>2-abc</li>
           <li>3-abcd</li>
           <li>4-abcde</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"></form>
       性别：<input type="radio" value="男" name="sex"/>男
       <input type="radio" value="女" name="sex"/>女
       <input type="radio" value="女" name="sex"/>妖
       <br />
       爱好：<input type="checkbox" value="打篮球" />打篮球
       <input type="checkbox" value="打篮球1" />打篮球1
       <input type="checkbox" value="打篮球2" />打篮球2
       <br />
       地址：<select>
           <option value="湖南省">湖南省</option>
           <option value="湖南省1">湖南省1</option>
           <option value="湖南省2">湖南省2</option>
       </select>
       <br />
       <input type="button" value="确定" id="ok"/>
       <pre>




       </pre>

   </body>
</html>01

陨落.190

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

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

扫一扫

【无标题】

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