jquery怎么打开word文档 jquery 文档

转载

mob64ca13feda16 2023-09-26 20:56:12

文章标签 jquery怎么打开word文档 js jquery javascript 选择器 文章分类 jQuery 前端开发

1. JQuery介绍

JQuery是一个JavaScript库
所谓的库，就是一个js文件，里面封装了很多预定的函数，比如获取元素，执行隐藏、移动等，目的就是在使用的时候直接调用，不需要重新定义，这样就可以极大的简化了JavaScript的代码
JQuery的官方网站：https://www.jquery.com

2. 入门使用

操作步骤

编写HTML文档
引入JQuery文件
使用JQuery获取元素
使用浏览器测试

JQuery的核心语法

$();

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<body>
    <div id="div">我是div</div>
</body>
<!--引入 jQuery 文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // JS方式，通过id属性值来获取div元素
    let jsDiv = document.getElementById("div");
    //alert(jsDiv);
    //alert(jsDiv.innerHTML);

    // jQuery方式，通过id属性值来获取div元素
    let jqDiv = $("#div");
    alert(jqDiv);
    alert(jqDiv.html());
</script>
</html>

3. 基本语法

3.1 对象转换

JQuery本质上虽然也是JS，但如果想使用JQuery的属性和方法，那么必须保证对象是JQuery对象，而不是JS方式获得的DOM对象，二者的API方法不能混合使用，若想使用对方的API，需要进行对象的转换
JS的DOM对象转换成JQuery对象

$(JS的DOM对象);

JQuery对象转换成JS对象

JQuery对象[索引];
JQuery对象.get(索引);

代码示例

// JS方式，通过id属性值获取div元素
let jsDiv = document.getElementById("div");
alert(jsDiv.innerHTML);
//alert(jsDiv.html());  JS对象无法使用jQuery里面的功能

// 将 JS 对象转换为jQuery对象
let jq = $(jsDiv);
alert(jq.html());

// jQuery方式，通过id属性值获取div元素
let jqDiv = $("#div");
alert(jqDiv.html());
// alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能

// 将 jQuery对象转换为JS对象
let js = jqDiv[0];
alert(js.innerHTML);

3.2 事件的使用

在JQuery中将事件封装成了对应的方法，去掉了JS中的.on语法
JS的做法

js对象.onclick = function(){};

JQuery的做法

JQuery对象.click(function(){});

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的使用</title>
</head>
<body>
    <input type="button" id="btn" value="点我">
    <br>
    <input type="text" id="input">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //单击事件
    $("#btn").click(function(){
        alert("点我干嘛?");
    });

    //获取焦点事件
    // $("#input").focus(function(){
    //     alert("你要输入数据啦...");
    // });

    //失去焦点事件
    $("#input").blur(function(){
        alert("你输入完成啦...");
    });
</script>
</html>

注意
this永远表示的js对象

3.3 事件的绑定和解绑

绑定事件

JQuery对象.on(事件名称，执行的功能);

解绑事件

JQuery对象.off(事件名称);

注意
如果不指定解绑的事件名称，那所有的事件都会解绑

3.4 事件的切换

概念

需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系

方式一：单独定义

语法

$(元素).事件方法名1(要执行的功能);
$(元素).事件方法名2(要执行的功能);
...

代码示例

$("#div").mouseover(function(){
    //背景色：红色
    //$("#div").css("background","red");
    $(this).css("background","red");
});
$("#div").mouseout(function(){
    //背景色：蓝色
    //$("#div").css("background","blue");
    $(this).css("background","blue");
});

方式二：链式定义

语法

$(元素).
事件方法名1(要执行的功能).
事件方法名2(要执行的功能).
...;

代码示例

$("#div").mouseover(function(){
   $(this).css("background","red");
}).mouseout(function(){
   $(this).css("background","blue");
});

3.5 遍历

方式一：传统方式

语法

for(let i = 0;i < 容器对象长度;i ++){
    执行功能;
}

代码示例

$("#btn").click(function(){
    let lis = $("li");
    for(let i = 0 ; i < lis.length; i++) {
        alert(i + ":" + lis[i].innerHTML);
    }
});

方式二：对象.each()方法

语法

容器对象.each(function(index,ele){
    执行功能;
});

代码示例

$("#btn").click(function(){
    let lis = $("li");
    lis.each(function(index,ele){
        alert(index + ":" + ele.innerHTML);
    });
});

方式三：$.each()方法

语法

$.each(容器对象，function(index,ele){
       执行功能;
});

代码示例

$("#btn").click(function(){
    let lis = $("li");
    $.each(lis,function(index,ele){
        alert(index + ":" + ele.innerHTML);
    });
});

方式四：for of 语句

语法

for(ele of 容器对象){
    执行功能;
}

代码示例

$("#btn").click(function(){
    let lis = $("li");
    for(ele of lis){
        alert(ele.innerHTML);
    }
});

4. 选择器

概念

类似与CSS的选择器，可以帮助我们获取元素

基本语法

$();

基本选择器

选择器	语法	作用
元素选择器	$(“元素的名称”);	根据元素名称获取元素对象们
id选择器	$("#id的属性值");	根据id属性值获取元素对象
类选择器	$(".class的属性值");	根据class属性值获取元素对象们

注意
如果拿到的是JQuery数组对象，想要获得其中的某一个，使用索引得到的将会是Js对象，再调用函数时需要注意对象类型，是JQuery对象还是JS对象

层级选择器

选择器	语法	作用
后代选择器	$(“A B”);	A下的所有B(包括B的子级)
子选择器	$(“A > B”);	A下的所有B(不包括B的子级)
兄弟选择器	$(“A + B”);	A相邻的下一个B
兄弟选择器	$(“A ~ B”);	A相邻的所有B

属性选择器

选择器	语法	作用
属性名选择器	$(“A[属性名]”);	根据指定属性名获取元素对象们
属性值选择器	$(“A[属性名=属性值]”);	根据指定属性名和属性值获取元素对象们

过滤器选择器

选择器	语法	作用
首元素选择器	$(“A:first”);	获得选择的元素中的第一个元素
尾元素选择器	$(“A:last”);	获得选择的元素中的最后一个元素
非元素选择器	$(“A:not(B)”);	不包括指定内容的元素
偶数选择器	$(“A:even”);	偶数，从0开始计数
奇数选择器	$(“A:odd”);	奇数，从0开始计数
等于索引选择器	$(“A:eq(index)”);	指定索引元素
大于索引选择器	$(“A:gt(index)”);	大于指定索引元素
小于索引选择器	$(“A:lt(index)”);	小于指定索引元素

表单属性选择器

选择器	语法	作用
可用元素选择器	$(“A:enabled”);	获得可用元素
不可用元素选择器	$(“A:disabled”);	获得不可用元素
单选/复选框被选中的元素	$(“A:checked”);	获得单选/复选框选中的元素
下拉框被选中的元素	$(“A:selected”);	获得下拉框选中的元素

5. DOM

5.1 操作文本

常用方法

方法	作用
html()	获取标签的文本
html(value)	设置标签的文本内容，解析标签

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作文本</title>
</head>
<body>
    <div id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的文本">
    <input type="button" id="btn2" value="设置div的文本">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
     //1. html()   获取标签的文本内容
     $("#btn1").click(function(){
         //获取div标签的文本内容
         let value = $("#div").html();
         alert(value);
     });

     //2. html(value)   设置标签的文本内容，解析标签
     $("#btn2").click(function(){
         //设置div标签的文本内容
         //$("#div").html("我真的是div");
         $("#div").html("<b>我真的是div</b>");
     });
</script>
</html>

5.2 操作对象

常用方法

方法	作用
$(“元素”)	创建指定元素
append(element)	添加成最后一个子元素，由添加者对象调用
appendTo(element)	添加成最后一个子元素，由被添加者对象调用
prepend(element)	添加成第一个子元素，由添加者对象调用
prependTo(element)	添加成第一个子元素，由被添加者对象调用
before(element)	添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
after(element)	添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
remove()	删除指定元素（自己移除自己）
empty()	清空指定元素的所有子元素

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作对象</title>
</head>
<body>
    <div id="div"></div>
    <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>

    <input type="button" id="btn2" value="将加油添加到城市列表最下方">    
    <input type="button" id="btn3" value="将加油添加到城市列表最上方">    
    <input type="button" id="btn4" value="将雄起添加到上海下方">    
    <input type="button" id="btn5" value="将雄起添加到上海上方">    
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
        <li id="jy">加油</li>
        <li id="xq">雄起</li>
    </ul>  <br><br><br>
    <input type="button" id="btn6" value="将雄起删除">    
    <input type="button" id="btn7" value="将描述列表全部删除">    
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 按钮一：添加一个span到div
    $("#btn1").click(function(){
        let span = $("<span>span</span>");
        $("#div").append(span);
    });
    
    //按钮二：将加油添加到城市列表最下方
    $("#btn2").click(function(){
        //$("#city").append($("#jy"));
        $("#jy").appendTo($("#city"));
    });

    //按钮三：将加油添加到城市列表最上方
    $("#btn3").click(function(){
        //$("#city").prepend($("#jy"));
        $("#jy").prependTo($("#city"));
    });
    
    //按钮四：将雄起添加到上海下方
    $("#btn4").click(function(){
        $("#sh").after($("#xq"));
    });
    
    //按钮五：将雄起添加到上海上方
    $("#btn5").click(function(){
        $("#sh").before($("#xq"));
    });

    //按钮六：将雄起删除
    $("#btn6").click(function(){
        $("#xq").remove();
    });
    
    //按钮七：将描述列表全部删除
    $("#btn7").click(function(){
        $("#desc").empty();
    });
    
</script>
</html>

5.3 操作样式

常用方法

方法	作用
css(name)	根据样式名称获取css样式
css(name,value)	设置css样式
addClass(value)	给指定的对象添加样式类名
removeClass(value)	给指定的对象删除样式类名
toggleClass(value)	如果没有样式类名，则添加，如果有，则删除

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作样式</title>
    <style>
        .cls1{
            background: pink;
            height: 30px;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid red;" id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的样式">   
    <input type="button" id="btn2" value="设置div的背景色为蓝色">  
    <br><br><br>
    <input type="button" id="btn3" value="给div设置cls1样式">   
    <input type="button" id="btn4" value="给div删除cls1样式">   
    <input type="button" id="btn5" value="给div设置或删除cls1样式">   
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.css(name)   获取css样式
    $("#btn1").click(function(){
        alert($("#div").css("border"));
    });

    // 2.css(name,value)   设置CSS样式
    $("#btn2").click(function(){
        $("#div").css("background","blue");
    });

    // 3.addClass(value)   给指定的对象添加样式类名
    $("#btn3").click(function(){
        $("#div").addClass("cls1");
    });

    // 4.removeClass(value)  给指定的对象删除样式类名
    $("#btn4").click(function(){
        $("#div").removeClass("cls1");
    });

    // 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除
    $("#btn5").click(function(){
        $("#div").toggleClass("cls1");
    });
    
</script>
</html>

5.4 操作属性

常用方法

方法	作用
attr(name,[value])	获得/设置属性的值
prop(name,[value])	获得/设置属性的值(checked,selected)

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作属性</title>
</head>
<body>
    <input type="text" id="username"> 
    <br>
    <input type="button" id="btn1" value="获取输入框的id属性">    
    <input type="button" id="btn2" value="给输入框设置value属性">
    <br><br>

    <input type="radio" id="gender1" name="gender">男
    <input type="radio" id="gender2" name="gender">女
    <br>
    <input type="button" id="btn3" value="选中女">
    <br><br>
    
    <select>
        <option>---请选择---</option>
        <option id="bk">本科</option>
        <option id="zk">专科</option>
    </select>
    <br>
    <input type="button" id="btn4" value="选中本科">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.attr(name,[value])   获得/设置属性的值
    //按钮一：获取输入框的id属性
    $("#btn1").click(function(){
        alert($("#username").attr("id"));
    });
    
    //按钮二：给输入框设置value属性
    $("#btn2").click(function(){
        $("#username").attr("value","hello...");
    });
    
    // 2.prop(name,[value])   获得/设置属性的值(checked，selected)
    //按钮三：选中女
    $("#btn3").click(function(){
        $("#gender2").prop("checked",true);
    });

    //按钮四：选中本科
    $("#btn4").click(function(){
        $("#bk").prop("selected",true);
    });
</script>
</html>

6. 复选框案例

6.1 案例效果

jquery怎么打开word文档 jquery 文档_选择器

6.2 功能分析

全选

为全选按钮绑定单击事件。
获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。

全不选

为全不选按钮绑定单击事件。
获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。

反选

为反选按钮绑定单击事件
获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。

6.3 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
</head>
<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: left">
                <input style="background:lightgreen" id="selectAll" type="button" value="全选">
                <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
                <input style="background:lightgreen" id="reverse" type="button" value="反选">
            </th>
    
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //全选
    //1.为全选按钮添加单击事件
    $("#selectAll").click(function(){
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值true
        $(".item").prop("checked",true);
    });

    //全不选
    //1.为全不选按钮添加单击事件
    $("#selectNone").click(function(){
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值false
        $(".item").prop("checked",false);
    });

    //反选
    //1.为反选按钮添加单击事件
    $("#reverse").click(function(){
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值是目前相反的状态
        let items = $(".item");
        items.each(function(){
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
</script>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java数据中台项目 java业务中台

下一篇：python 构建项目如何搭建python项目架构

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

开源基础软件社区	51CTO学堂
51CTO	软考资讯	汽车开发者社区

jquery怎么打开word文档 jquery 文档

jquery怎么打开word文档 jquery 文档

1. JQuery介绍

2. 入门使用

3. 基本语法

3.1 对象转换

3.2 事件的使用

3.3 事件的绑定和解绑

3.4 事件的切换

3.5 遍历

4. 选择器

5. DOM

5.1 操作文本

5.2 操作对象

5.3 操作样式

5.4 操作属性

6. 复选框案例

6.1 案例效果

6.2 功能分析

6.3 代码实现

51CTO博客