jQuery

最新推荐文章于 2022-04-09 17:31:18 发布

KINGmUDER

最新推荐文章于 2022-04-09 17:31:18 发布

阅读量175

点赞数

本文链接：https://blog.csdn.net/weixin_44153058/article/details/103864913

版权

jQuery

1.什么是jQuery

jQuery是一门轻量的、免费开源的JS函数库，可以极大的简化JS代码。

jQuery的核心思想：“写得更少,但做得更多”

轻量的：代码或项目对一门技术的依赖程度，依赖程度越低，这个技术越轻；反之，依赖程度越高，这个技术越重，推荐使用轻量级的技术。

2.jQuery的优势

1.可以极大的简化JS代码

2.可以象css选择器一样获取元素

$("#div1") -获取id为div1的元素

$(".c1") - 获取所有class值为c1的元素

$("#div span") - 获取id为div1元素内部所有的span元素

3.可以通过修改css样式控制页面效果

//为所有div设置背景(jquery方式)
$("div").css("background","red");
//为所有div设置背景(js方式)
var arr = Doucment.getElementsByTagName("div");
for(var i = 0;i < arr.length;i++){
    arr[i].style.background = "red";
}

4.可以兼容常用浏览器

3.jQuery引入

jQuery函数库其实就是一个JS文件(其中封装了很多js函数)

如果要使用jQuery,将jQuery函数库文件引入即可!

<!-- 引入jQuery库文件 -->
<script src="js/jquery-1.8.3.js"></script>

4.文档就绪事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study</title>
</head>
<body>
    <h1 id="d1">引入jquery示例...</h1>
    <script>
        /*获取id为d1的元素的内容*/
        //1.获取id为d1的元素
        var h1 = document.getElementById("d1");
        //2.获取h1的内容
        alert(h1.innerHTML);
    </script>
    <script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
</body>
</html>

这里我们发现如果将js代码移到body的上方会在浏览器报错,这是因为在执行获取id为d1的元素时,h1元素还没有被浏览器加载到,所以获取不到h1元素

这里我们还有一种方法可以解决,将h1代码放到文档就绪事件函数中,文档就绪事件函数会在浏览器加载完成整个html代码后立即执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
</head>
<body>
    <script>
        /* (jquery版)文档就绪事件函数:当浏览器加载完整个htm网页后 */
        $(function () {
            //1.获取id为d1的元素
            var h1 = document.getElementById("d1");
            //2.获取h1的内容(InnerHTML)
            alert(h1.innerHTML);
        })
    </script>
    <h1 id="d1">test jquery文档事件函数</h1>
    <!-- 完整写法为 $(document).ready(function(){}); -->
</body>
</html>

5.jQuery选择器

1.基本选择器

1.元素名(标签名)选择器

$(“div”) - 获取所有div元素

$(“span”) - 获取所有span元素

2.类选择器

$(".c1") - 获取所有class值为c1的元素

$(“div.c1”) - 获取所有class值为c1的div元素

3.ID选择器

$("#one") - 获取id为one的元素

2.层级选择器

1.后代选择器

$("#one span") - 匹配id为one的元素内部的所有的span元素

2.相邻兄弟选择器

$("#one+span") - 匹配id为one的元素后面紧邻的span兄弟元素

等价于:

$("#one").next(“span”) - 匹配id为one的元素后面紧邻的span兄弟元素

$("#one").prev(“span”) - 匹配id为one的元素前面紧邻的span兄弟元素

3.$("#two~div")

$("#one~span") - 匹配id为one的元素后面所有的span兄弟元素

$("#one").nextAll(“span”) - 匹配id为one的元素后面所有的span兄弟元素

$("#one").prevAll(“span”) – 匹配id为one的元素前面所有的span兄弟元素

$("#one").siblings(“span”) – 匹配id为one的元素前、后所有的span兄弟元素

3.基本过滤选择器

1.:first | :last

$(“div:first”) – 匹配所有div中的第一个div元素

$(“div:last”) – 匹配所有div中的最后一个div元素

:eq(n)

$(“div:eq(0)”) – 匹配所有div中的第一个div元素

$(“div”).eq(0) – 匹配所有div中的第一个div元素

$(“div:eq(-1)”) – 匹配所有div中的最后一个div元素

$(“div”).eq(-1) – 匹配所有div中的最后一个div元素

4.综合案例

1.全选或全不选

html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/choice.js"></script>

    <title>test</title>
</head>
<body>
    爱好:<input type="checkbox" name="item" value="football"/>足球
        <input type="checkbox" name="item" value="moive"/>电影
        <input type="checkbox" name="item" value="car"/>赛车
        <input id="all" type="checkbox" onclick="checkAll()" value="chose">全选
</body>
</html>

js代码如下

/**
 * 练习:点击全选设置,商品所在的行全选或者全不选
 */
function checkAll() {
    //获取全选复选框的选中状态(选中或取消)
    var status = $("#all").prop("checked");
    console.log(status);
    //将全选框的状态设置给所有的复选框
    $("input[type='checkbox']").prop("checked",status);
}
/*
*为所有的普通复选框绑定点击事件,每次点击普通复选框都要
* 检查所有的普通复选框是否全都选中了,如果是,就选中全选
* 复选框,否则,就取消选中全选复选框
*/
$(function () {
    $("input[name='item']").click(function () {
        //获取所有普通复选框,并遍历其中的每一个复选框
        var isCheckAll = true;//假设所有的普通复选框都选择了
        $("input[name='item']").each(function () {
            //判断所有的普通复选框是否全部选中
            var status = $(this).prop("checked");
            if ( !status ){
                isCheckAll = false;//至少有一个没选中
            }
        });
        if (isCheckAll){
            //结束循环后,isCheckAll=true,所有普通复选框都选中了
            $("#all").prop("checked",true);
        }else {
            //isCheckAll=false,所有的普通复选框没有全部选中
            $("#all").prop("checked",false);
        }

    });
});

创建表格元素

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
    <!--<script type="text/javascript" src="js/test.js"></script>-->
    <title>tsest</title>
</head>
<body>
    <button onclick="createTable3()">提交</button>
    <br>
    <input type="button" onclick="createTable()" value="创建"/>
    <br/><br/>
    <table>
        <tr>
            <td>good</td>
            <td>well</td>
        </tr>
        <tr>
            <td>fine</td>
            <td>wonderfull</td>
        </tr>
    </table>
    <br><br>
    <input type="button" onclick="createTable2()" value="创建"/>
    <br><br>
    <form action="get">
        行数<input type="text" id="rows"value="3" >
        列数<input type="text" id="cols"value="3">
        <input type="button" onclick="createTable3()" value="创建"/>
    </form>
    <script type="text/javascript" src="js/form.js"></script>
</body>

</html>

js代码如下:

//创建单行六列的表格
function createTable() {
    var $tab = $("<table></table>");
    var $tr = $("<tr></tr>");
    for (var i = 0; i < 6; i++){
        var $td = $("<td></td>");
        $td.html("我是td!")
        //将td添加到tr内部
        $tr.append($td);
    }
    //将tr添加到table内部
    $tab.append($tr);
    //将table添加到网页中
    $("body").append($tab);
}
//创建五行六列的表格
function createTable2() {
    var $tab = $("<table></table>");
    for (var i = 0;i < 5;i++){
        var $tr = $("<tr></tr>");
        for (var j = 0;j < 6;j++){
            var $td = $("<td></td>");
            $td.html(i+"行"+j+"列");
            $tr.append($td);
        }
        $tab.append($tr);
    }
    $("body").append($tab);
}
//创建指定行和指定列的表格
function createTable3() {
    //var rows = $("#rows").val();
    //var cols = $("#cols").val();
    var rows = document.getElementById("rows").value;
    console.log(rows);
    var cols = document.getElementById("cols").value;
    console.log(cols);
    var $tab = $("<table></table>");
    for (var i =0; i < rows; i++){
        var $tr = $("<tr></tr>");
        for (var j = 0; j < cols; j++){
            var $td = $("<td></td>");
            $td.html("我是td!");
            $tr.append($td);
        }
        $tab.append($tr);
    }
    $("body").append($tab);
}

6.总结

1.html元素操作

1.创建元素

$("

") – 创建一个包含内容的div元素,返回的是一个表示div元素的jquery对象

$(“

xxxxx

”) – 创建一个包含内容的div元素,返回的是一个表示div元素的jquery对象

2.添加子元素

$p a r e n t . a p p e n d ($ child) – 父元素调用方法添加子元素

$(“body”).append(“

新的

”) – 往body内部追加一个div元素

3.删除元素

$(“div”).remove() – 删除所有div元素

4.替换元素

$(“div”).replaceWith(“

替换后

”)

2.html元素内容和值操作

1.html()函数(类似于js中的innerHTML属性)

– 用于获取或设置元素的内容,比如为div,span,p,h1等元素设置内容

$(“div”).html() – 获取所有div中第一个div的内容

$(“div”).html(xxxx) – 为所有div设置内容

2.text()函数(类似于js中的innerText属性)

–用于获取或设置元素的文档内容

$(“div”).text() – 获取所有div中的所有文本内容

$(“div”).text(xxxx) – 为所有的div设置文本内容

3.val()函数(类似于js中的value属性)

–获取或设置表单项元素的value值(input/select/option/textarea)

$(“input”).val() --获取所有的input元素中的第一个input元素value值

$(“input”).val(值) – 为所有的Input元素设置value值

3.元素属性和css操作’

对这个html代码进行操作

1.prop()函数 – 用于获取或设置元素的属性值

$(“input[type=‘checkbox’]”).prop(“checked”) – 获取input复选框的选中状态, 返回true表示复选框为选中状态, 返回false表示复选框为取消选中状态

$(“input[type=‘checkbox’]”).prop(“checked”, true)-- 设置所匹配的复选框元素为选中状态

2.css()函数 – 用于获取或设置元素的css属性的值

$("#div1").css(“width”) – 获取id为div1元素的宽度

$("#div1").css(“width”,“200px”) – 设置id为div1元素的宽度为200px

$("#div1").css({

“width” : “200px”,

“height” : “150px”,

“border” : “5px solid red”,

“background” : “pink”

})

–设置id为div1元素的宽度为200px、高度为150px、边框以及背景颜色等样式

4.其他函数

1.show() – 设置元素由隐藏变为显示

hide() – 设置元素由显示变为隐藏

$(“div”).show() – 设置所有的div元素为显示

等价于:

$(“div”).css(“display”, “block”

$(“div”).hide() – 设置所有的div元素为隐藏

等价于:

$(“div”).css(“display”, “none”)

2.toggle()/slideToggle()

toggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示

slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示, 切换为显示为下拉状态, 隐藏为收缩状态.

KINGmUDER

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery1.什么是jQueryjQuery是一门轻量的、免费开源的JS函数库，可以极大的简化JS代码。jQuery的核心思想：“写得更少,但做得更多”轻量的：代码或项目对一门技术的依赖程度，依赖程度越低，这个技术越轻；反之，依赖程度越高，这个技术越重，推荐使用轻量级的技术。2.jQuery的优势1.可以极大的简化JS代码2.可以象css选择器一样获取元素$("#div1") ...
复制链接

扫一扫