jQuery课堂笔记及练习

最新推荐文章于 2022-06-09 19:11:55 发布

balabalapd

最新推荐文章于 2022-06-09 19:11:55 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/WLkkjm/article/details/89010524

版权

本文详细介绍了jQuery的学习，包括jQuery事件的使用，如ready()事件及其触发，以及一个实现按钮变化的练习。此外，还探讨了jQuery的选择器，如ID选择器、类选择器等。最后，讲解了如何使用jQuery获取和操作元素的内容，如text()、html()和val()方法。

摘要由CSDN通过智能技术生成

一、jQuery学习

1.jQuery事件及练习

<1>jQuery事件

●jQuery中涉及的ready()事件（代码如下）

$(document).ready(function (){
    //执行的代码
});

●再通过一个内置函数实现触发事件（代码如下）

$("button").click(function(){
    alert("你单击了按钮"):
});

<2>jQuery练习------实现按钮变化

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function (){
            $(".one").css({'background-color':'black','width':'300px','height':'60px'});
            $("ul").css({'list-style':'none '});
            $("ul li").css({'float':'left '});
            var a = $("a");
            a.css({'text-decoration':'none','color': 'black','margin': '0 2px',
                'background-color': 'palevioletred' });
        })
    </script>
</head>
<body>
<div class="one">
    <ul>
        <li><a href="#" >首页</a></li>
        <li><a href="#" >课程内容</a></li>
        <li><a href="#" >上课地点</a></li>
    </ul>
    <input type="button" value="按钮" id="button1">
</div>
<script>
    $('#button1').click(function(){
        $('a').css({'color': 'red', 'background-color': 'blue' });
    })

</script>

</body>
</html>

●代码实现：

按下按钮后↓↓↓↓↓↓

*注：jQuery中css想添加多个属性的方法

通过“{}”大括号，可以在里面添加多个属性和值
属性和值都要用引号括起来，用冒号分隔
多个属性使用逗号隔开

2.jQuery选择器

各个选择器说明：

$("#title") 选取所有id="title" 的元素
$(".white") 选取所有 class="white"的元素
$("p.inteo") 选取所有 class="inteo"的<p>元素
$("p#demo") 选取所有 id="demo"的<p>元素
$(".white:first") 选取所有 class="white"的元素中的第一个元素

3.jQuery获取元素的内容和属性（DOM-文档对象模型操作）

获取内容text(),html(),val()

①text()：设置或返回元素的文本内容

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="text">我叫张三</div>
<input type="button" value="按钮" id="button" >
<script>
    var button = $("#button");
    button.click(function(){
        alert("div的内容和为："+$("#text").text())
    })
</script>
</body>
</html>

●代码实现：

②html()：设置或返回所有元素的文本内容

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="text">我叫张三
    <p>123</p>
    <p>aaa</p>
</div>
<input type="button" value="按钮显示div的内容" id="button1" >
<input type="button" value="按钮显示html的内容" id="button2" >
<script>
    var button1 = $("#button1");
    button1.click(function(){
        alert("div的内容和为："+$("#text").text())
    })
    $("#button2").click(function(){
        alert("html的内容和为："+$("#text").html())
    })
</script>
</body>
</html>

●代码实现：

$("#text").text()结果为:

$("#text").html()结果为:

③val()：设置或返回表单字段的值

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" id="text"  value="我的名字叫张三">
<input type="button"id="button"  value="按钮" >
<script>
    $("#button").click(function(){
        document.write("input的value为："+$("#text").val())
    })
</script>
</body>
</html>

●代码实现：

按下按钮后↓↓↓↓↓↓

balabalapd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery课堂笔记及练习

一、jQuery学习1.jQuery事件及练习<1>jQuery事件●jQuery中涉及的ready()事件（代码如下）$(document).ready(function (){ //执行的代码});●再通过一个内置函数实现触发事件（代码如下）$("button").click(function(){ alert("你单击了按钮"):}...
复制链接

扫一扫