
js方式①
<script>
        window. Onload=function(){
            //根据id拿到按钮
            let btn=document.getElementById("btna");
            //给按钮添加点击事件  匿名函数
            btn.onclick=function( ){
                //根据id拿到文本框的值
                let str=document.getElementById("aa").value;
                //弹出
                alert(str);
            }
        }
    </script>
 
jQuery方式②
 <!-- 引入外部js=jQuery的类库 -->
    <script src="jquery-3.6.4.js"></script>
    <!-- 另起一个script块 -->
    <script>
        //页面载入的函数=加载DOM
        // $(document).ready(function( ){
        //     alert(1);
        // })
        
        //简便写法    $=jQuery
       $(function(){
        //相当于window.onload
 
        案例一
           let btn=$("#btnb");
           btn.click(function(){
            let str=$("#aa").val( );
            alert(str);
        })
 
<body>
    <h2>jQuery入门&选择器</h2>
    <h3>一.jQuery入门</h3>
    <h4>1.点击按钮弹出文本框的值</h4>
    <input  type="text" id="aa"/>
    <input  type="button" id="btna" value="点击[纯js方式]"/>
    <input  type="button" id="btnb" value="点击[jQuery方式]"/>
<body/>

3.使用jQuery步骤

3.1.1.下载jQuery库开发版本：jquery-3.3.1.js 生产版本：jquery-3.3.1.min.js

3.1.2.生产版本：jquery-3.3.1.min.js

3.1.3.使用

五:jQuery选择器& 层次选择器

一.基本选择器

ID选择器：#ID
类选择器：.class
元素选择器:element
通配符：*
多个选择器(并集)：selector1,selector2
多个选择器(交集)：selector1 selector2
查找所有元素，查询子元素

案例2：分别使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）


 <h3>二.jQuery选择器</h3>
    <h4>2.1-2.2  基本选择器 & 层次选择器</h4>
    <div id="xx">
        <p>这是第一个div的段流&nbsp;<span>啦啦啦啦啦</span></p>
        <span>瑶瑶天天开心</span>
        <h3>-------------</h3>
        <span>很好喝</span>
    </div>
    <div class="yy">
        这是第二个div
    </div>
    <p>这是外面的段流</p>
    <span>瑶瑶很厉害</span>
 
 // 2.1-2.2  基本选择器 & 层次选择器
 
        //单个样式
        // $("#xx").css("background","yellow");//id选择器  #
        //多个样式
        //背景是粉红色  字体是红色  类选择器  .
        // $(".yy").css({"background":"pink","color":"red"});
        //标签选择器  
        // $("div").css("background","yellow");
        //通配符
        // $("*").css("background","yellow");
        //并集   所有的p和span 
        // $("p,span").css("color","red");
        //找后代标签
        // $("div span").css("color","pink");
        //找儿子  父子关系
        // $("p>span").css("color","pink")
        //紧跟着p的span标签  同级
        // $("p+span").css("color","green");
        //找p后面所有的span标签  同级
        // $("p~span").css("color","green");

二.过滤选择器

参考jQuery文档
获取第一个元素:first
最后一个元素:last
获取偶数下标的元素:even
获取奇数下标的元素:odd
获取某一范围元素 :gt大于 :lt小于

案例4：使用过滤选择器，选择li中的元素


 <h4>2.3 过滤选择器</h4>
    <ul>
        <li>0-瑶瑶</li>
        <li>0-欣欣</li>
        <li>0-慧慧</li>
        <li>0-辉辉</li>
        <li>0-哈哈</li>
        <li>0-简介</li>
    </ul>
 
 //过滤选择器
 
        //第一个
        // $("ul>li:first").css("color","green");
        //最后一个
        // $("ul>li:last").css("color","green");
        //第3个
        // $("ul>li:eq(2)").css("color","green");
        //倒数第2个
        // $("ul>li:eq(-2)").css("color","green");
        // 下标为偶数   奇数行
        //  $("ul>li:even").css("color","green");
        // 下标为奇数   偶数行
        //  $("ul>li:odd").css("color","pink");
        //大于0
        // $("ul>li:gt(0)").css("color","pink");
        //小于6
        // $("ul>li:lt(6)").css("color","pink");
        //0>x>6  先小于后大于
        // $("ul>li:lt(5):gt(0)").css("color","pink");

案例5：表格隔行换色


<h4>案例5:表格隔行换色</h4>
    <table border="1px" width="400px">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
 
        //案例5:表格隔行换色
        $("table tr:even").css("background","pink");
        $("table tr:odd").css("background","green");

三.表单选择器

参考jQuery文档
获取选择单选框的值
获取选择多选框的值
获取选择下拉值

案例6：获取表单中的单选、多选、下拉值


  <h4>2.4表单选择器</h4>  
    <form action="" id="myForm">
        性别:<input type="radio" checked="checked" name="ssex" value="男"/>男
            <input type="radio" name="ssex" value="女"/>女<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>
    
    // 2.4表单选择器
     $("#ok").click(function(){
            // 拿性别的值
            let sex=$("#myForm input:radio:checked").val();
            console.info(sex);
            // 拿爱好的值
            $("#myForm input:checkbox:checked").each(function(){
                console.log($(this).val());
            })
            // 拿地址 :selected:被选中的
           let address=$("#myForm select option:selected").val();
           console.log(address);
        });

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/574133