jQuery基础学习（1）

jQuery是快速、简洁的JavaScript框架，它极大地程度的简写的JavaScript代码，废话不多说。
使用jQuery第一步导入jQuery

1. <script type="text/javascript" src=" js/jquery-3.3.1.js"></script>
2.  <script type="text/javascript"></script>

第二步定义jQuery方法

// 第一个jQuery的方法括号是参数，多个参数用,分开
 1. $(function name() {});//此方法是在页面加载完成是就执行的的方法

第三步创建jQuery实例
‘’$‘’就是jQuery实例
jQuery使用实例
1

 <script type="text/javascript" src=" js/jquery-3.3.1.js"></script>
 <script type="text/javascript"> $(function name() {
    alert($('#text').val());//弹出id为text的值  });
    </script> 
    </head> 
    <body> <!-- 定义一个文本框并附上默认值 -->
     <input id="text" type="text"  value="123">

后台输出效果为
这里写图片描述

val();为获取的数据值除了val()还有html()和text()这三个为用的比较多的
#为id选择器jQuery还有许多选择器这里就不详说
基础使用就是这些啦
下面为一个简单的隔行变色和悬停变色

 <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function() {
        //table tr为获取所有的table表格下的tr odd为匹配所有索引值为奇数的元素，从 0 开始计数  .css('要改变的地方','要变成什么样')改变样式 
        //意思为找到所有双数的tr并且吧背景颜色改为红色
        $('table tr:odd').css("background-color", "yellow");
        //even为匹配所有索引值为偶数的元素，从 0 开始计数
        //意思為找到所有的单数tr并把背景颜色变为粉色
        $('table tr:even').css("background-color", "pink");
        //:eq 是等于的意思  一定要注意空格table tr :eq(0)和table tr:eq(0)和效果不一样
        //意思为找到第一个tr并把背景颜色改为红色
        $('table tr:eq(0)').css("background-color","red");
        //:gt为大于 .hover(function() {},function() {})为鼠标移入移出第一个参数为移入，第二个参数为移出
        $('table tr:gt(0)').hover(function() {
        //this 则是移入的数据项 
            $(this).css("background-color", "red");
        }, function() {
            $('table tr:even').css("background-color", "pink");
            $('table tr:odd').css("background-color", "yellow");
            $('table tr:eq(0)').css("background-color","red");
        });

    });
</script>
</head>
<body>
<!--定义一个table表格 -->
    <table border="1" width="90%" align="center"  ">
        <tr>
            <td>学生编号</td>
            <td>学生姓名</td>
            <td>学生年龄</td>
        </tr>
        <tr>
            <td>t21601</td>
            <td>111</td>
            <td>58</td>
        </tr>
        <tr>
            <td>t21602</td>
            <td>222</td>
            <td>68</td>
        </tr>
        <tr>
            <td>t21603</td>
            <td>333</td>
            <td>78</td>
        </tr>
        <tr>
            <td>t21604</td>
            <td>444</td>
            <td>88</td>
        </tr>
    </table>

隔行变色
这里写图片描述
光标移入

移出光标则还原

jQuery的第一次学习就到这里了，谢谢观看，大佬勿喷

jQuery基础学习（1）

猜你喜欢