jQuery-语法

最新推荐文章于 2024-07-05 14:21:58 发布

sunywz

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量294

点赞数

分类专栏： Jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_31776219/article/details/51648728

版权

Jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

对JQ的理解
这里写图片描述

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的第一个jQuery程序</title>
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            alert("我编写的第一个jQuery程序！^^");
        })
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>问答效果</title>
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a").click(function(){
                $(this).css("background-color","orange").next().addClass("show");
            });
        });
    </script>
    <style type="text/css">
        h2{padding: 5px;}
        p{display: none;}
        .show{display: block}
    </style>
</head>
<body>
<a href="javascript:;" title="点击查看答案">什么是受益人?</a>
<p>
    <strong>解答：</strong>
    受益人是指人身保险中由被保险人或者投保人指定的
    享有保险金请求权的人，投保人、被保险人可以为受益人。
</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>为图片添加边框</title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> 
    //方法1 使用css()方法 
    //方法2 使用addClass（）方法

</script>
<style type="text/css">
    .border{border:1px solid #ccc;}
</style>
</head>
<body> 
    <img src="./images/pic.gif" />  
</body>
</html>

这里写图片描述

这里写图片描述
基本选择器

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery基本选择器示例</title>
<style type="text/css">
#box {background-color:#FFF; border:2px solid #000; padding:5px;}
</style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
     $("#btn1").click(function(){   //触发不同的效果按钮点击事件
        //$("h3").css("background-color","#09F"); //标签选择器，获取<h3>元素并为其添加背景颜色
        //$(".title").css("background","#09F");//类选择器，获取并设置所有class为title的元素的背景颜色
        //$("#box").css("background","#09F");//ID选择器，获取并设置id为box的元素的背景颜色
        //$("h2,dt,.title").css("background","#09F");//并集选择器，获取并设置所有<h2>、<dt>、class为title的元素的背景颜色
        //$("h3.title").css("background","#09F");//交集选择器，获取并设置所有class为title的<h2>元素的背景颜色
        $("*").css("color","red");//全局选择器，改变所有元素的字体颜色
     });
});
</script>
</head>
<body>
<input type="button" id="btn1" value="显示效果"/>
    <div id="box"> id为box的div
        <h2 class="title">class为title的h2</h2>
        <h3 class="title">class为title的h3</h3>
        <h3>热门排行</h3>
        <dl>
            <dt><img src="images/case_1.gif" width="93" height="99" alt="斗地主" /></dt>
            <dd class="title">斗地主</dd>
            <dd>休闲游戏</dd>
            <dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
        </dl>
    </div>
</body>
</html>

这里写图片描述

sunywz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery-语法

对JQ的理解 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>我的第一个jQuery程序</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <script type=
复制链接

扫一扫