二、jQuery语法

一、本课目标

  • 会使用jQuery搭建开发环境
  • 会使用ready（）方法加载页面
  • 掌握jQuery语法
  • 掌握jQuery代码风格

二、使用jQuery搭建开发环境

2.1获取jQuery

image.png

jQuery库文件，分为开发板和发布版：


image.png

jQuery版本区别：
1版本是兼容IE6、7、8的，而且也是使用最为广泛的，其功能不再增加，官方只进行维护，一般的项目来说这个版本完全可以了。其最终版本是1.12.4.
2版本是不兼容IE6、7、8的，而且其功能也不再增加了，官方也是只做维护。如果项目当中不考虑低版本浏览器的兼容性问题，是可以使用这个版本的。其最终版本是2.2.4。
3版本是不兼容IE6、7、8的，只支持最新的浏览器。除非是项目当中有特殊要求，一般是不会使用这个版本的。因为许多老的jQuery插件是不支持这个版本的。该版本的浏览器兼容性不太好，所以这个版本官方是在不断更新和维护当中。

2.2在页面中引入jQuery：本地引进和直接从网上引入

语法1：

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

语法2：百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js
"></script>

三、jQuery基本语法

3.1使用jQuery弹出提示框

image.png

示例代码：

<script>
    $(document).ready(function() {
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>
image.png

3.2jQuery语法结构

image.png

四、jQuery操作页面元素

image.png

4.1addClass()方法

语法：

jQuery对象.addClass([样式名]);

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左导航菜单</title>
    <style type="text/css">
        li{list-style: none; line-height: 22px; cursor: pointer;}
        .current{background: #6cf; font-weight: bold; color: #fff;}
    </style>
</head>
<body>
<ul>
    <li id="current">jQuery简介</li>
    <li>jQuery语法</li>
    <li>jQuery选择器</li>
    <li>jQuery事件与动画</li>
    <li>jQuery方法</li>
</ul>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function() {
               $("li").click(function() {
                     // 点击li元素的时候会给第一个li元素添加一个样式
                     $("#current").addClass("current");
               })
   })
</script>
</body>
</html>

4.2css()方法

image.png

语法：

css("属性", "属性值");
css({"属性1":"属性值1", "属性2":"属性值2",...})；

示例代码：
html文件：

<!doctype html>
<html>
 <head lang="en">
  <meta charset="UTF-8">
  <title>仿京东左侧菜单</title>
  <link href="css/style.css" rel="stylesheet"/>
 </head>
 <body>
    <div class="nav-box">
        <div class="nav-top"><a href="">全部商品分类</a></div>
        <ul>
            <li>
                <a href="">家用电器</a><div><img src="images/erji.jpg"/></div>
            </li>
            <li>
                <a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="images/erji1.jpg"/></div>
            </li>
            <li>
                <a href="">电脑</a>、<a href="">办公</a><div><img src="images/erji2.jpg"/></div>
            </li>
            <li>
                <a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="images/erji3.jpg"/></div>
            </li>
            <li>
                <a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="images/erji4.jpg"/></div>
            </li>
        </ul>
    </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/hover.js"></script>
 </body>
</html>

css文件：

*{padding:0;margin:0;}
a{text-decoration:none;}
.nav-box{
    width:210px;
    margin:5px 0 0 5px;
}
.nav-top a{
    display:block;
    height:45px;
    font-size:16px;
    line-height:45px;
    padding:0 10px;
    background:#B1191A;
    color:#fff;
}
ul{background:#c81623;list-style:none;padding-bottom:1px;}
ul li{
    height:30px;
    line-height:30px;
    font-size:14px;
    color:#fff;
    position:relative;
    padding-left: 5px;
}
ul li a{color:#fff;}
ul li div{display:none; position: absolute; left: 211px; top:0px;}

js文件：

$(document).ready(function(){
    $("li").mouseover(function(){
        // 鼠标移动到上面的时候背景颜色变为黄色
        // 设置一个css属性
        //$(this).css("background", "orange");
        //设置多个css属性
        $(this).css({"background":"orange", "font-size":"40px"});
    }).mouseout(function(){
        // 鼠标移开的时候背景颜色变为原来的颜色
        $(this).css("background", "#c81623");
    })
});

4.3设置元素的显示和隐藏

语法

$(selector).show();
$(selector).hide();

示例代码：
html文件和css文件与上例相同
js文件：

$(document).ready(function(){
    $("li").mouseover(function(){
        // 鼠标移动到上面的时候背景颜色变为黄色
        // 设置一个css属性
        $(this).css("background", "orange");
        //设置多个css属性
        //$(this).css({"background":"orange", "font-size":"40px"});
        //让当前li标签下面的图片显示出来
        $(this).children("div").show();
    }).mouseout(function(){
        // 鼠标移开的时候背景颜色变为原来的颜色
        $(this).css("background", "#c81623");
        //让当前li标签下面的图片隐藏起来
        $(this).children("div").hide();
    })
});

五、jQuery代码风格

image.png

5.1链式操作

对一个对象进行多重操作，并将操作结果返回给该对象
示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>问答特效</title>
    <style type="text/css">
        h2{padding: 5px;}
        p{display: none;}
    </style>

</head>
<body>
<h2>什么是受益人?</h2>
<p>
    <strong>解答：</strong>
    受益人是指人身保险中由被保险人或者投保人指定的
    享有保险金请求权的人，投保人、被保险人可以为受益人。
</p>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
       $("h2").click(function (){
           // next()方法是取下一个同胞元素
           //点击h2,给h2添加背景颜色并显示p元素
           $(this).css("background", "red").next().css("display","block");
       })
    });
</script>

</body>
</html>

5.2隐式迭代

也就式隐式遍历。
示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>隐式迭代</title>
    <style type="text/css">
        li {line-height:22px;}
    </style>
</head>
<body>
<ul>
    <li>数码产品</li>
    <li>家用电器</li>
    <li>妇幼保健</li>
    <li>时尚丽人</li>
</ul>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //这个地方如果用javascript来操作的话需要先通过
        // getElementsByTagName方法获取所有的li元素，然后遍历数组去改变样式
        // 但是如果用js的话，则不用迭代，它会隐式迭代
        $("li").css({"font-weight":"bold","color":"red"});
    });
</script>
</body>
</html>

六、注释

image.png

七、总结

image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。