时间戳

首页 > 技术文章 > jquery练习记录

jquery练习记录

-hjj 2018-11-27 19:43 原文

在导入静态文件css js jquery imanges的时候需要先设置文件的路径

导入jquery后要注意script的type一定要写上啊！！！

通过ID改变CSS字样

把所有具有ID的属性改变CSS字样

通过ID改变属性的CSS字样

通过匹配ID以.....开头的元素来改变CSS字样（例子中是匹配ID以Q开头的元素）

通过匹配class中以1结尾的元素来改变字样

通过匹配ID中包含某个字符的元素来改变CSS样式

juery操作DOM中获取元素的文本内容（）（jquery操作DOM的内容操作）

在P元素内添加文本内容（jquery操作DOM的内容操作）

通过匹配属性=值的方式，获取文本框输入的内容（jquery操作DOM的内容操作）

jquery属性操作attr(),获取div的属性ID的值

jquery属性操作attr()设置div属性ID的值

jquery属性操作removeAttr()移除属性ID

jquery属性操作addclass（）添加class属性值

jquery属性操作toggleClass（）添加或移除class属性

jquery属性操作css（）添加样式

jquery节点操作childern获取子节点

jquery节点操作find获取后台元素

jquery节点操作prev ,next查找前一个，后一个的兄弟元素（如果加上参数，则会跳过一步）

jquery节点操作siblings，匹配所有同级的兄弟元素，并加上css

jquery节点操作parent，获取父节点

添加节点操作





删除节点

事件操作，页面加载完毕后执行

事件操作，点击事件，this添加css属性

天天果园前端页面设计案例

/*清楚默认样式，设置基础样式*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
    margin: 0;/*取消外边距*/
    padding: 0;/*取消内边距*/
    list-style: none;/*取消列表的项目符号*/
}
body{
    font: 12px "微软雅黑",sans-serif;
    color: #999;
}
a{
    text-decoration: none;/*取消超链接的下划线*/
    color: #999;
}
a:hover{
    color: #64A131;/*鼠标移动到超链接时变色*/
}
image,input{
    vert-align: bottom;/*图片和输入框垂直底部对齐*/
}
/*设置页面的宽（最外层的div标签）*/
#container{
    width: 990px;
    margin: 0 auto;
}
#nav{
    height: 30px;
    background: #eee;
    line-height: 30px;/*行高，让文垂直居中*/
}
#rightNav{
    float: right;/*右侧导航栏右浮*/
}
#rightNav li{
    float: left;/*导航栏内让li元素在ＤＩＶ中左浮并列在一行*/
    text-align: center;
}
#rightNav li b{
    border-right: 1px solid #99B0CD;
    margin: 10px;
}
/*左侧导航*/
#nav>a>i{
    display: inline-block;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top: 10px solid black;
    position: relative;/*三角符号相对定位，下移４ＰＸ*/
    top: 6px;
}
#nav>a{
    margin: 6px;
}
/*2.banner*/
#banner img{
    width: 990px;
}
#commend img{
    width: 200px;
}

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/nav.css' %}">
<body>

    <div id="container"></div>
        <!--1.导航-->
        <div id="nav">
            <!--右侧导航-->
            <ul id="rightNav">
                <li>
                    <a href="#">[登录]</a>
                    <a href="#">[注册有惊喜]</a>
                    <b></b>
                </li>
                <li>果园公告
                    <b></b>
                </li>
                <li>券卡兑换
                    <b></b>
                </li>
                <li>手机果园</li>
            </ul>
            <!--左侧导航栏-->
            <a href="#">
                上海
                <i></i>
            </a>
            <a href="#">满百包邮</a>
            <a href="#">星达夜</a>

        </div>
        <!--２．banner-->
        <div id="banner">
            <img src="{% static 'images/guoyuan.png' %}" alt="">

        </div>
        <!--３．推荐-->
        <div id="commend">
            <img src="{% static 'images/tuijian1.png' %}" alt="">
            <img src="{% static 'images/tuijian2.png' %}" alt="">
            <img src="{% static 'images/tuijian3.png' %}" alt="">

        </div>
        <!--4.主体信息-->
        <div id="main">

        </div>

</body>
</html>

推荐阅读