jQuery JavaScript 前端(第一篇)

jQuery 介绍

1.顶级对象
$
jQuery
2.页面加载事件
$(function(){页面加载后执行代码});
3.其他事件
jQuery对象.事件名(function (){事件处理程序});
事件名没有on,例如click() mouseover();
4.jQuery对象和DOM对象的装换
DOM对象转jQuery对象
$(DOM对象);
jQuery对象转DOM对象
jQuery对象.get(0);
jQuery对象[0];
5.jQuery对象中常用的方法
a. text() innerText或textContent,兼容性处理 ,传参表示设置,没有表示获取
b. html() innerHTML,传参表示设置,没有表示获取
c. val() value,传参表示设置,没有表示获取
d. css() style,传入两个参数就是设置一个样式,(键值对),传入一个对象,储存多个键值对同时设置多个样式,闯入一个字符串,表示获取样式属性
e. show() 显示元素,如果传入参数表示以动画的方式显示
f. hide() 隐藏元素,如果传入参数表示以动画的方式隐藏
g. siblings() 除自己以外的其他兄弟节点
h. children() 获取所有子元素
i. find () 在当前元素中找到其他的元素
6.选择器

a.id选择器  $("#ID名");
b. 标签选择器   $("标签名");
c. 类选择器   $(".类名");
d. 标签+类选择器  $("标签名.类名");
e. 多条件选择器  $("标签名,标签名...");
f.  子代选择器   $("标签名>标签名");
g. 后代选这起   $("标签名 标签名");
h.  后一个兄弟元素  $ ("标签名+标签名");
i.  后面所有的兄弟元素  $("标签名~标签名");
j.   偶数选择器  $("标签名:even");
k.  奇数选择器  $("标签名:odd");
l. 索引为5的元素  $("标签名:eq(5)");
m. 索引大于5的元素 $("标签名:gt(5)");
n.   索引小于5的元素  $("标签名:lt(5)");

案例
1.网页开关灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页开光灯</title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //获取按钮,注册点击事件
            $('#btn').click(function () {
                //判断btn的value值从而改变body的css属性
                if ($(this).val() === '关灯') {
                    //.val ()==>有值表示设置,没值表示获取
                    $('body').css('backgroundColor', 'black');
                    $(this).val('开灯');
                } else {
                    $('body').css('backgroundColor', 'white');
                    $(this).val('关灯');
                }
            });
        });
    </script>
</head>
<body>
<input type="button" value="关灯" id="btn"/>
</body>
</html>

2.手风琴案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //找到所有的li,让当前的li的width为800,其他兄弟节点为100
            $("#box>ul>li").mousemove(function () {
                $(this).siblings('li').css('width', '100px');
                $(this).css('width', '800px');
            }).mouseout(function () {
                $("#box>ul>li").css('width', '240px');
            });
        });
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="images/1.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/4.jpg"/></li>
        <li><img src="images/5.jpg"/></li>
    </ul>
</div>
</body>
</html>

3.突出显示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;

        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //找到所有的li,并且注册鼠标进入和离开事件.opacity 设置透明度
        $(function () {
            $('.wrap>ul>li').mousemove(function () {
                $(this).siblings('li').css('opacity', 0.5);
                $(this).css('opacity', 1);
            }).mouseout(function () {
                $(this).css('opacity', 0.5);
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
</html>

jQuery JavaScript 前端(第一篇)

jQuery 介绍

猜你喜欢