第十八篇

最新推荐文章于 2019-02-13 15:21:04 发布

a530609250

最新推荐文章于 2019-02-13 15:21:04 发布

阅读量203

点赞数 1

分类专栏：作业

本文链接：https://blog.csdn.net/a530609250/article/details/87182546

版权

作业专栏收录该内容

25 篇文章 4 订阅

订阅专栏

初识jQuery
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more

实现隔行变色效果，只需一句关键代码
$(“tr:even”).css(“background-color”,"#e8f0f2");

“$”等同于“ jQuery ”
$(document).ready()=jQuery(document).ready()
$(function(){…})=jQuery (function(){…})
DOM对象：直接使用JavaScript获取的节点对象
var objDOM=document.getElementById(“title”);

var objHTML=objDOM.innerHTML;
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲title").html( )\dots$ ()函数进行转化：$(DOM对象)
var txtName =document.getElementById(“txtName”);
var $t x t N a m e =$ (txtName);

jQuery选择器功能强大，种类也很多，分类如下
通过CSS选择器选取元素
基本选择器
层次选择器
属性选择器
通过过滤选择器选择元素
基本过滤选择器
可见性过滤选择器
标签选择器 element
类选择器 .class
ID选择器 #id
并集选择器 selector1,selector2,…,selectorN
全局选择器 *

后代选择器 ancestor descendant
子选择器 parent>child
相邻元素选择器 prev+next
同辈元素选择器 prev~sibings

:visible 选取所有可见的元素
:hidden 选取所有隐藏的元素
代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>林徽因简介</title>
    <style type="text/css">
        body,h1,h2,ul,li,p{margin: 0; padding: 0; font-family: "微软雅黑"; line-height: 28px;}
        p{ font-size: 14px; text-indent: 2em; display: none;}
        ul{display: none;}
        h1{text-align: center; line-height: 60px;font-size: 32px; background: #333333; color: #fff; margin-bottom: 5px;}
        h2{text-align: center; line-height: 50px;font-size:28px;  background: #333333; color: #fff; margin-top: 5px;}

    </style>
</head>
<body>
<h1>林徽因简介</h1>
<p>林徽因，女，汉族，原名林徽音，出生于浙江杭州，祖籍福建福州。中国著名建筑家、诗人、作家。人民英雄纪念碑和中华人民共和国国徽深化方案的设计者
</p><p>林徽因是建筑师梁思成的第一任妻子。三十年代初，与夫婿梁思成用现代科学方法研究方法研究中国古代建筑，成为这个学术领域的开拓者。</p>
<h2>主要作品</h2>
<ul><li class="current">《你是人间四月天》</li>
    <li>《宝莲灯》</li>
    <li>《九十九度中》</li></ul>

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {
        $("h1").click(function () {
            $("p").show();
        });

        $("h2").click(function () {
            $("ul").show()
        });
    })
    $
</script>
</body>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图书简介</title>
    <style>
        body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;}
        body{
            font-family: "微软雅黑";
            font-size: 12px;
            line-height: 28px;
            padding: 1px 5px;


        }
        #book{
            margin: 5px auto 0 auto;
            width: 650px;
            overflow: hidden;
        }
        .imgLeft{
            float:left;
            width: 210px;
        }
        .imgLeft img{width: 200px;}
        .textRight{
            float: right;
            width: 440px;
        }
        #book h1{font-size: 16px; line-height: 50px;}
        .textRight dl{padding-left: 5em;}
        .textRight dl dd{display: none;}
        #jdPrice p{ display:inline;}



    </style>
</head>
<body>
<section id="book">
    <div class="imgLeft"><img src="img/store.jpg" alt="岛上书店"></div>
    <div class="textRight">
        <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
        <p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
        <p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
        <div class="price">
            <div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
            <dl>
                <dt>以下促销可在购物车任选其一</dt>
                <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
                <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></p>
        </div>
    </div>
</section>
<script src="js/jquery-1.12.4.js"></script>

</body>
<script>
    $(function () {
        $(".intro").css("color","red");
        var i=$("#jdPrice span");
        $(i[0]).css({"color":"red","font-size":"24px","font-weight":"bold"});
        $(i[1]).css({"color":"#cccccc","text-decoration":"line-through"});
        $("dl").css("color","red")
        $("dl").click(function () {
            $("dd").show()
        })
        $("dd span").css({"color":"white","background-color":"red","padding":"1px 5px"})
        $("#ticket span").css({"color":"white","background-color":"red","padding":"1px 5px"})


    })




</script>
</html>

a530609250

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十八篇

初识jQueryjQuery由美国人John Resig于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装它的设计思想是write less,do more实现隔行变色效果，只需一句关键代码$(“tr:even”).css(“background-color”,&quot;#e8f0f2&quot;);“$”等同于“ jQuery ”$(do...
复制链接

扫一扫