Jquery介绍和选择器详解

最新推荐文章于 2023-08-01 17:35:48 发布

极乐码农

最新推荐文章于 2023-08-01 17:35:48 发布

阅读量245

点赞数 1

分类专栏：前端(JQuery+JS+H5+CSS) 文章标签： jquery js javascript css html

本文链接：https://blog.csdn.net/weixin_43216437/article/details/104847939

版权

前端(JQuery+JS+H5+CSS) 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、引入Jquery类库定义jquery主函数

一般用这种相对路径来引，查看网页源代码能进去说明引合适着呢

定义jquery的主函数的含义在于把整个文档加载完毕后再去执行主函数；
定义jquery主函数有两种方式：$(document).ready(function () {
})和
$(function () {
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <script type="text/javascript">
        //定义jquery的主函数的含义在于把整个文档加载完毕后再去执行主函数
        //定义jquery主函数的第一种方式
       /* $(document).ready(function () {
            var div=document.getElementById('div')
            alert(div)
        })*/
       //定义jquery主函数的第二种方式(比较简单推荐使用)
        $(function () {
            var div=document.getElementById('div')
            alert(div)
        })
    </script>
</head>
<body> 
<div id="div"> </div>
</body>
</html>

2、Jquer对象

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jquery对象了(这个对象就可以使用jquery里的方法了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <script type="text/javascript">
       $(function () {
           //获取dom对象
           var input=document.getElementById('myInput');
           //将dom对象转换成jquery对象
           var jInput=$(input);
           //取文本框的值
           var value=jInput.val();
           alert(value);
       })
        function myClick(){
            //获取dom对象
            var input=document.getElementById('myInput');
            //将dom对象转换成jquery对象
            var jInput=$(input);
            //取文本框的值
            var value=jInput.val();
            alert(value);
        }
    </script>
</head>
<body>
<input type="text" id="myInput">
<input type="button" value="点击" onclick="myClick()">
</body>
</html>

3、Jquery的选择器(Jquery的核心)

3.1jquery之常用选择器

3.1.1id选择器(切记只有id选择器选择的对象不是数组)

第一种id选择器：var value=$(’#myInput’).val()；id的前面是#符号相当于dom里的document.getElementById()

3.1.2元素选择器

第二种元素选择器： var value=$(‘input’).val()alert(value)；在’‘里直接加元素名字相当于dom里的 document.getElementsByTagName()；获取页面上所有input的jquery元素,它是一个数组，但是遍历的时候不能用普通的for循环；需要使用jquery提供的遍历方式

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <script type="text/javascript">
       $(function () {
       })
        function myClick(){
            //获取页面上所有input的jquery元素,它是一个数组，但是遍历的时候不能用普通的for循环
            var inputs=$('input');
            //jquery提供的循环
            inputs.each(function () {
                //获得每一个jquery对象
                var inputObj=$(this);
                //获取jquery对象的value
                var  value=inputObj.val()
                if (inputObj.val() == '点击') {
                    //each返回false的时候跳出循环(这个很重要)
                    return false;
                }
                alert(value);
            })
        }
    </script>
</head>
<body>
<input type="text" id="myInput1"><br>
<input type="text" id="myInput2"><br>
<input type="text" id="myInput3"><br>
<input type="text" id="myInput4"><br>
<input type="button" value="点击" onclick="myClick()">
</body>
</html>

3.1.3类选择器

第三种类选择器： var input=$(’.input’);class的前面是.这个符号;，它是一个数组，所以还是要用jquery的遍历方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
     <style type="text/css">
        div{border: red solid;width: 100px;height: 100px}
    </style>
    <script type="text/javascript">
       $(function () {
       })

       function myClick() {
           //通过类选择器获得jquery对象(一个数组)
           var inputs=$('.div');
           inputs.each(function () {
               var  divObj=$(this)
               //相当于divObj.innerHTML(获取标签里面的内容)
               alert(divObj.html())
           })
       }
    </script>
</head>
<body>
<div class="div">div1</div>
<div class="div">div2</div>
<div class="div">div3</div>
<div class="div">div4</div>
<div class="div">div5</div>
<div class="div">div5</div>
<input type="button" value="点击" onclick="myClick()">
</body>
</html>

3.1.4 星号选择器**

第四种:通过*获取页面所有的jquery对象(基本不用)

function myClick() {
           var objs=$('*')
           objs.each(function () {
               var obj=$(this)
               alert(obj.html())
           })
       }

3.1.5多种选择器的叠加

第五种：选择器还可以做叠加，用法：var=objs=$(’#div1,.div2,input’)返回值集合元素，多种选择器一同使用我们需要使用逗号来分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <style type="text/css">
        div{border: red solid;width: 100px;height: 100px}
    </style>
    <script type="text/javascript">
       $(function () {
       })

       function myClick() {
           var objs=$('#div1,.div2,input')
           objs.each(function () {
               var obj=$(this)
               alert(obj.html())
           })
       }
    </script>
</head>
<body>
<div id="div1">div1</div>
<div class="div2">div2</div>>
<input type="button" value="点击" onclick="myClick()">
</body>
</html>

3.2jquery高级选择器之层级选择器

3.2.1 var inputs=$(‘form input’)可以拿到下级所有

//可以拿到form的下级所有的input元素,只要在form的下级都可以拿到
var inputs=$(‘form input’),中间用空格隔开；两个参数都是元素名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myClick() {
            //可以拿到form的下级所有的input元素,只要在form的下级都可以拿到
          var inputs=$('form input')
            inputs.each(function () {
                var inputObj=$(this)
                alert(inputObj.val())
            })
        }
    </script>
</head>
<body>
<form>
    <input type="text"><br>
    <input type="password"><br>
    <div>
        <input type="text"><br>
    </div>
</form>
<input type="button" value="点击" onclick="myClick()">
</body>
</html>

3.2.2var inputs=$(‘form>input’)，只能拿到下一级

//可以拿到form的下一级的input元素(只能拿到儿子结点的input)
var inputs=$(‘form>input’)两个参数都是元素名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myClick() {
            //可以拿到form的下一级的input元素(只能拿到儿子结点的input)
            var inputs=$('form>input')
            inputs.each(function () {
                var inputObj=$(this)
                alert(inputObj.val())
            })
        }
    </script>
</head>
<body>
<form>
    <input type="text"><br>
    <input type="password"><br>
    <div>
        <input type="text"><br>
    </div>
</form>
<input type="button" value="点击" onclick="myClick()">
</body>
</html>

3.2.3var inputs=$(’#username + input’)，只能拿到紧挨着的Jquery对象

特别注意前面一个参数和后面一个参数必须是紧挨着的jquery对象(两个参数可以用id选择器，类选择器和元素选择器，但必须是紧挨着的jquery对象)，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myClick() {
            //只能拿到前一个juery对象紧挨着的后一个jquery对象
            var inputs=$('#username + input')
            inputs.each(function () {
                var inputObj=$(this)
                alert(inputObj.val())
            })
        }
    </script>
</head>
<body>
<form>
    <input type="text" id="username">
    <input type="text"><br>
    <input type="text"><br>
    <input type="button" value="点击" onclick="myClick()">
</form>
</body>
</html>

3.3jquery高级选择器之过滤选择器

3.3.1 first、last、evan、odd的使用var tFirst=$(‘tr:first’)

first是获取元素的第一个；last是获取元素的最后一个，even获取索引是偶数的元素(索引从0开始的)另外还可引用css进行样式设计，odd获取索引是技术点元素(索引是从0开始的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myClick() {
            //获取tr里的第一个元素
            var tFirst=$('tr:first')
            //获取tr里的最后一个元素
            var tLast=$('tr:last')
            //获取tr里的索引值为偶数(索引是从零开始的)的元素(是数组)
            //还可以引用css进行样式的设计
            var tEvens=$('tr:even').css({background:'red'})
            //获取tr里的索引值为奇数(索引是从零开始的)的元素(是数组)
            var tOdds=$('tr:odd').css({background:'yellow'})
            alert(tFirst.html())
            alert(tLast.html())
           tEvens.each(function () {
               var tEven=$(this)
               alert(tEven.html())
           })
            tOdds.each(function () {
                var odd=$(this)
                alert(odd.html())
            })
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td>用户名</td>
        <td>凯爹</td>
    </tr>
    <tr>
        <td>战力</td>
        <td>10000</td>
    </tr>
    <tr>
        <td>无敌指数</td>
        <td>五颗星</td>
    </tr>
    <tr>
        <td>最爱</td>
        <td>小鲁班</td>
    </tr>
    <tr>
        <td>妹妹</td>
        <td>露娜</td>
    </tr>
</table>
<input type="button" value="点击" onclick="myClick()">
</body>
</html>

3.3.2 checked的用法 var chs=$(‘input:checked’)

主要用在checkBox中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myClick() {
             //选中的元素会被筛选出来
            var chs=$('input:checked')
            //没有选中的元素会被筛选出来
            var chs=$('input:not(:checked)')
            chs.each(function () {
                var ch=$(this)
                alert(ch.val())
            })
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td><input type="checkbox" value="1"></td>
        <td>用户名</td>
        <td>凯爹</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="2"></td>
        <td>战力</td>
        <td>10000</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="3"></td>
        <td>无敌指数</td>
        <td>五颗星</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="4"></td>
        <td>最爱</td>
        <td>小鲁班</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="5"></td>
        <td>妹妹</td>
        <td>露娜</td>
    </tr>
</table>
<input type="button" value="点击" onclick="myClick()">
</body>
</html>

3.3.3全选和反选

jquery元素选择器获得到的都是数组，
如果不去遍历就调用方法，那么就是给这一组元素去操作，
如果想单个操作必须遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function checkAll() {
            var inputs=$('input')
            inputs.each(function () {
                //获取td下的input
               var inputs=$('td input')
                inputs.each(function () {
                    //第一个参数属性值，第二个参数是值
                   $(this).attr('checked','checked')
                })
            })
        }
        function uncheckAll() {
            var inputs=$('td input')
            inputs.each(function () {
                //jquery中的方法既能获取值(根据属性),又能设置值(根据属性)
               var checkState=$(this).attr('checked')
                if (checkState == 'checked') {
                    //把这个属性移除也就是把选中的状态去掉
                    $(this).removeAttr('checked');
                } else {
                    //进行设置
                    $(this).attr('checked','checked')
                }
            })
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td><input type="checkbox" value="1"></td>
        <td>用户名</td>
        <td>凯爹</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="2"></td>
        <td>战力</td>
        <td>10000</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="3"></td>
        <td>无敌指数</td>
        <td>五颗星</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="4"></td>
        <td>最爱</td>
        <td>小鲁班</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="5"></td>
        <td>妹妹</td>
        <td>露娜</td>
    </tr>
</table>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="uncheckAll()">
</body>
</html>

3.3.4 eq、gt、lt的用法var trEq=$(‘tr:eq(0)’);

eq(选择索引是某个值的元素，索引是从0开始的；gt(选择索引值大于某个值的元素；lt(选择索引值小于某个值的元素)))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style type="text/css">
        table{border-collapse: collapse}
    </style>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myclick() {
          /*这个索引和even和odd一样都是从0开始的
          * 查找索引是0的元素,也就是第一个元素
          * */
           var trEq=$('tr:eq(0)')
            alert(trEq.html())

            //查找索引值大于1的元素(它是数组)
            var trGts=$('tr:gt(1)')
            trGts.each(function () {
                alert($(this).html())  
            })

            //查找索引值小于3的元素(它是数组)
            var trLts=$('tr:lt(3)')
            trLts.each(function () {
                alert($(this).html())
            })
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td><input type="checkbox" value="1"></td>
        <td>用户名</td>
        <td>凯爹</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="2"></td>
        <td>战力</td>
        <td>10000</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="3"></td>
        <td>无敌指数</td>
        <td>五颗星</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="4"></td>
        <td>最爱</td>
        <td>小鲁班</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="5"></td>
        <td>妹妹</td>
        <td>露娜</td>
    </tr>
    <tr>
        <td><input type="button" value="点击" onclick="myclick()"></td>
    </tr>
</table>
</body>
</html>

3.4jquery高级选择器之属性选择器

 属性过滤器的过滤规则是通过元素的属性来获取相应的元素

3.4.1var attrs=$(‘input[type]’)

 var attrs=$('input[type]')和 
 var attrs1=$("input[type='checkbox']")以及
 var attrs2=$("input[type!='checkbox']")的用法
 选取出的元素都是数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style type="text/css">
        table{border-collapse: collapse}
    </style>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myclick() {
            //选择属性是type的元素
           var attrs=$('input[type]')
            attrs.each(function () {
                alert($(this).val())
            })

            //选择属性是type并且名字是checkbox的元素
            //外层用双引号
            var attrs1=$("input[type='checkbox']")
            attrs1.each(function () {
                alert($(this).val())
            })

            //选择属性是type并且名字不是checkbox的元素
            var attrs2=$("input[type!='checkbox']")
            attrs2.each(function () {
                alert($(this).val())
            })
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td><input type="checkbox" value="1"></td>
        <td>用户名</td>
        <td>凯爹</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="2"></td>
        <td>战力</td>
        <td>10000</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="3"></td>
        <td>无敌指数</td>
        <td>五颗星</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="4"></td>
        <td>最爱</td>
        <td>小鲁班</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="5"></td>
        <td>妹妹</td>
        <td>露娜</td>
    </tr>
    <tr>
        <td><input type="button" value="点击" onclick="myclick()"></td>
    </tr>
</table>
</body>
</html>

3.4.2模糊筛选 ^、$ 、*的用法 var inputs=$(“input[name^=‘p’]”)

   这种用法是选择出input标签里的name属性的名字里有
   'p'这个字符的元素，相当于模糊选择
   (选择规则是从前往后选择选择出以x开始的元素)

还有一种是 var inputs=$(“input[name￥=‘d’]”)里面是美元符号，这种是从后往前筛选，以xx结尾的
还有一种是*筛选出包含某个字符的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style type="text/css">
        table{border-collapse: collapse}
    </style>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myclick() {
            //选择出以p开头的元素
            var inputs=$("input[name$='p']")
            
            //选择出以d结尾的元素
            var inputs1=$("input[name$='d']")
            
            //选择出包含w的元素
            var inputs2=$("input[name*='w']")
            inputs.each(function () {
                alert($(this).val())
            })
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td><input type="text" name="password"></td>
        <td>用户名</td>
        <td>凯爹</td>
    </tr>
    <tr>
        <td><input type="text" name="password"></td>
        <td>战力</td>
        <td>10000</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>无敌指数</td>
        <td>五颗星</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>最爱</td>
        <td>小鲁班</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>妹妹</td>
        <td>露娜</td>
    </tr>
    <tr>
        <td><input type="button" value="点击" onclick="myclick()"></td>
    </tr>
</table>
</body>
</html>

3.4.3复合选择器 var inputs=$(“input[type=‘text’][name^=‘p’]”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style type="text/css">
        table{border-collapse: collapse}
    </style>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myclick() {
            //筛选出type==text和以name是以p开头的元素
            var inputs=$("input[type='text'][name^='p']")
            inputs.each(function () {
                var value=$(this).val()
                alert(value)
            })
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td><input type="password" name="password"></td>
        <td>用户名</td>
        <td>凯爹</td>
    </tr>
    <tr>
        <td><input type="text" name="pas"></td>
        <td>战力</td>
        <td>10000</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>无敌指数</td>
        <td>五颗星</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>最爱</td>
        <td>小鲁班</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>妹妹</td>
        <td>露娜</td>
    </tr>
    <tr>
        <td><input type="button" value="点击" onclick="myclick()"></td>
    </tr>
</table>
</body>
</html>

3.5jquery高级选择器之子元素过滤选择器

3.5.1fist-child和last-child的使用 var firstChild=$(“ul li:first-child”)

序号是从1开始的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style type="text/css">
        table{border-collapse: collapse}
    </style>
    <title>Title</title>
    <script type="text/javascript">
        function myclick() {
            //获得ul里第一个孩子结点li
            var firstChild=$("ul li:first-child")
            //获得ull里最后一个孩子结点li
            var lastChild=$("ul li:last-child")
            alert(firstChild.html())
            alert(lastChild.html())
        }
    </script>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ul>
<button onclick="myclick()">点击</button>
</body>
</html>

3. 5.2 获取任意一个孩子结点var secondChild=$(“ul li:nth-child(2)”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style type="text/css">
        table{border-collapse: collapse}
    </style>
    <title>Title</title>
    <script type="text/javascript">
        function myclick() {
            //获得ul里第一个孩子结点li
            var firstChild = $("ul li:first-child");
            
            //获得ull里最后一个孩子结点li
            var lastChild = $("ul li:last-child");
            
            //获得ull里任意一个孩子结点li
            var secondChild = $("ul li:nth-child(2)")

            alert(firstChild.html());
            alert(lastChild.html());
            alert(secondChild.html())
        }
    </script>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ul>
<button onclick="myclick()">点击</button>
</body>
</html>

3.6Jquery选择器的练习

3.6.1给网页所有的p元素添加onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style type="text/css">
        table{border-collapse: collapse}
    </style>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
            //调用jquery的click方法
            $("p").click(function () {
                alert($(this).html())
            });
        })
    </script>
</head>
<body>
<p>我是段落一</p>
<p>我是段落二</p>
<p>我是段落三</p>
<p>我是段落四</p>
<p>我是段落五</p>
</body>
</html>

3.6.2使一个特定的表格隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style type="text/css">
        table{border-collapse: collapse}
    </style>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
        })
        function myclick() {
            $("tr:even").css({background:'yellow'})
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td>用户名</td>
        <td>凯爹</td>
    </tr>
    <tr>
        <td>战力</td>
        <td>10000</td>
    </tr>
    <tr>
        <td>无敌指数</td>
        <td>五颗星</td>
    </tr>
    <tr>
        <td>最爱</td>
        <td>小鲁班</td>
    </tr>
    <tr>
        <td>妹妹</td>
        <td>露娜</td>
    </tr>
</table>
<td><input type="button" value="点击" onclick="myclick()"></td>
</body>
</html>

3.6.3对多选框进行操作，输出选中的多选框的个数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--给整个jsp文件引入jquery类库-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style type="text/css">
        table{border-collapse: collapse}
    </style>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {

        })
        function myClick() {
            var inputsObj = $("input:checked");
            alert(inputsObj.length)
        }
    </script>
</head>
<body>
<input type="checkbox">多选项一
<input type="checkbox">多选项二
<input type="checkbox">多选项三
<input type="checkbox">多选项四
<input type="checkbox">多选项五
<input type="checkbox">多选项六
<input type="button" value="点击" onclick="myClick()">
</body>
</html>

3.6.4屏幕变色程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <title>屏幕变色</title>
    <script type="text/javascript">
        function becomeColor() {
            var value=$("input").val()
            $("body").css({background:value})
        }
    </script>
</head>
<body>
<input type="text"><br>
<input type="button" value="点击变颜色" onclick="becomeColor()">
</body>
</html>

极乐码农

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery介绍和选择器详解

1、引入Jquery类库定义jquery主函数一般用这种相对路径来引，查看网页源代码能进去说明引合适着呢定义jquery的主函数的含义在于把整个文档加载完毕后再去执行主函数；定义jquery主函数有两种方式：$(document).ready(function () {})和$(function () {})<!DOCTYPE html><html lang...
复制链接

扫一扫

专栏目录