jQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

泊停Bo

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/qq_39402590/article/details/93806638

版权

1.什么是jQuery

　　jQuery 全称：javaScript Query是js的一个框架，本质上仍然是js

2.jQuery特点

　　支持各种主流的浏览器

　　使用简单

　　拥有便捷的插件扩展机制和丰富的插件

3.使用JQuery

引入jQuery文件

（1）jQuery的选择器

　　　　注意：

　　　　　　jQuery中选择器获取的是存储了HTML元素对象的数组

　　　　　　jQuery获取的元素对象不能够直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容

<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery选择器</title>
        <!--引入jQuery文件-->
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
        <!--声明js代码域-->
        <script type="text/javascript">
            //id选择器
            function testId(){
                //jQuery--id
                var inp=$("#uname");
                alert(inp.val());
            }
            //标签选择器
            function testEle(){
                var inps=$("input");
            }
            //类选择器
            function testClass(){
                var inps=$(".common");
            }
            //组合选择器
            function testAll(){
                var eles=$("h3,input");
            }
            //层级选择器
            //parent>child:在给定的父元素下匹配所有子元素
            //prev+next:匹配所有紧接在prev元素后的next元素
            //prev~sibling:匹配prev元素之后的所有sibling元素
            function testChild(){
                var inps=$("div>input");
            }
　　　　　　　//简单选择器
　　　　　　　//内容选择器
　　　　　　　//可见性选择器
　　　　　　　//属性选择器
　　　　　　　//表单选择器
        </script>
        <style type="text/css">
            .common{}
            #showdiv{
                width: 300px;
                height: 300px;
                border: solid 2px orange;
            }
        </style>
    </head>
    <body>
        <h3>jQuery选择器</h3>
        <input type="button" name="" id="" value="测试id" οnclick="testId()" class="common"/>
        <input type="button" name="" id="" value="测试标签选择器" οnclick="testEle()" />
        <input type="button" name="" id="" value="测试类选择器" οnclick="testClass()" />
        <input type="button" name="" id="" value="测试组合选择器" οnclick="testAll()" />
        <hr/>
        用户名：<input type="text" name="uname" id="uname" value="张三" class="common"/>
        <hr />
        <input type="button" name="" id="" value="测试子选择器" οnclick="testChild()" />
        <hr />
        <div id="showdiv">
            <input type="text" name="" id="" value="" />
            <input type="text" name="" id="" value="" />
            <input type="text" name="" id="" value="" />
            <input type="text" name="" id="" value="" />
        </div>
    </body>
</html>

（2）jQuery操作元素的属性

　　　　获取：

　　　　　　对象名.attr("属性名")　　//返回当前属性值

　　　　　　　　注意此中方式不能获取value属性的实时数据，使用对象名.val()进行获取

　　　　修改：

　　　　　　对象名.attr("属性名","属性值");

<html>
    <head>
        <meta charset="utf-8" />
        <title>jquery操作元素属性</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
        <!--声明js代码域-->
        <script type="text/javascript">
            function testField(){
                //获取元素对象
                var uname=$("#uname");
                //获取
                alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
            }
            function testFiled2(){
                //获取元素对象
                var uname=$("#uname");
                uname.attr("type","button");
            }
        </script>
    </head>
    <body>
        <h3>jquery操作元素属性</h3>
        <input type="button" name="" id="" value="测试获取元素属性" οnclick="testField"/>
        <hr />
        用户名：<input type="text" name="uname" id="uname" value="" />
    </body>
</html>

（3）jQuery操作元素的样式和内容

（4）jQuery操作元素的文档结构

（5）jQuery中的事件

（6）jQuery中的动画效果

（7）案例

泊停Bo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

1.什么是jQuery　　jQuery 全称：javaScript Query是js的一个框架，本质上仍然是js2.jQuery特点　　支持各种主流的浏览器　　使用简单　　拥有便捷的插件扩展机制和丰富的插件3.使用JQuery引入jQuery文件（1）jQuery的选择器　　　　注意：　　　　　　jQuery中选择器获取的是存储了HTML元素对象的数组　...
复制链接

扫一扫