JQuery讲解

什么是JQuery？

jQuery其实就是一个轻量级的javascript函数库，通过它我们可以"写的少做的多";

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

JQuery使用：

一 JQuery使用文档：

http://jquery.cuishifeng.cn/

二准备工作：

首先要将JQuery文件导入

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

三查找元素

操作元素：

一选择器：

直接找到某个或者某类标签

1. id $("#id")

2.class $(".class")

3 查找标签：$("a")

4.* 代表所有

5.两个一起找 $("a,c2")

6.层级子子孙孙
找到id=i10所有的a标签
$("#i10 a")
$("#i10>a")只找儿子
找到所有孩子中的第一个 first
last最后一个
$("#i10 a:first")

索引
$("#i10 a:eq(0)")默认从0开始
7.根据属性查找
$('[alex]') 找具有alex属性的标签
$('[alex="a"]') 找到alex属性等于a的标签
text disabled不可编辑

文本操作
$(..).text()获取文本内容
$(..).text("a")#设置文本内容
$(..).html()获取html内容
$(..).html(<a>asd<a>)设置html内容
$(..).val（）获取他的值
$(..).val（。。）设置他的值

状态操作
toggleClass("")如果有去掉，如果没有加上
addClass
removeClass

属性操作：
用于做自定义属性
$(..).attr
对标签上的属性进行操作
$("#i1").attr("name","alex")传一个参数获取属性对应的值，传两个替换
removeAttr删除属性
$(..).prop
#专门为checkbox radio进行操作
$(..).prop("checked")
$(..).prop("checked",true)

文档处理
添加删除修改
append追加到最后
prepend 添加到最前面
after在查找标签下面
brfore在查找标签上面
empty清空内容
remove删除标签

筛选器
在选择器选好的基础上在选一次
$("li").eq(1)索引
next获取下一个
prev获取上一个
parent获取父标签
children获取孩子标签
siblings获取兄弟标签
find 找出标签子子孙孙中寻找
nextAll找到下面所有的
nextUntil 找到哪里截止
prevAll
prevUntil

Jquery css处理
$("t1").css("样式"，"样式值")

位置：
scrollTop（[val]）返回顶部没有参数标示获取，有参数表示设置
scrollLeft（[val]）
offset().left 指定标签在html的坐标
offset().top
$(i1).height()
innerHeight（）
outerHeight（）
outerHeight（true）

Jquery组织事件发生
$("c1").bind()
$("c1").unbind()
$("c1").delegate()
$("c1").undelegate()

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="Checkall();"/>
<input type="button" value="反选" onclick="resave()"/>
<input type="button" value="取消" onclick="canall()"/>
<table border="1">
    <thead>
    <tr>
        <th>选项</th>
        <th>IP</th>
        <th>post</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>80</td>
        </tr>
    </tbody>
</table>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
    function Checkall() {
        $(":checkbox").prop("checked",true)
    }
    function canall() {
        $(":checkbox").prop("checked",false)
    }
    function resave() {
        $(":checkbox").each(function () {
            var v=$(this).prop("checked")?false:true
            $(this).prop("checked",v)
        })
    }
</script>
</html>

全选多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            height: 20px;
            width: 200px;
            background-color: black;
            color: white;
        }
        .item1{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div style="height: 400px;width: 200px;border: red solid 1px">
    <div class="header">
        <div class="item">标题1</div>
        <div class="item1">内容</div>
    </div>
    <div class="header">
        <div class="item">标题2</div>
        <div class="item1 hide">内容</div>
    </div>
    <div class="header">
        <div class="item">标题3</div>
        <div class="item1 hide">内容</div>
    </div>
</div>a
<script src="jquery-1.12.4.js"></script>
<script>
    //对所有item标签绑定函数
    $(".item").click(function () {
        $(this).next().removeClass("hide")
        $(this).parent().siblings().find(".item1").addClass("hide")//find 查找标签
    })
</script>
</body>
</html>

下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            position: fixed;
            height: 400px;
            width: 400px;
            top: 50%;
            left: 50%;
            margin-top: -250px;
            margin-left: -250px;
            background-color: #dddddd;
            z-index: 10;
        }

        .item1 {
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            background-color: black;
            opacity: 0.5;
            position: fixed;
            z-index: 5;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<a onclick="add()">添加</a>
<table border="1px">
    <tr>
        <td>8.8.8.8</td>
        <td>20</td>
        <td>
            <a class="i1">编辑</a>|<a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td>8.8.8.8</td>
        <td>20</td>
        <td>
            <a class="i1">编辑</a>|<a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td>8.8.8.8</td>
        <td>20</td>
        <td>
            <a class="i1">编辑</a>|<a class="del">删除</a>
        </td>
    </tr>
</table>
<div class="item hide">
    <input name="port" type="text"/>
    <input name="ip" type="text"/>
    <input type="button" value="取消" onclick="reall()">
</div>

<div class="item1 hide"></div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
    function add() {
        $(".item,.item1").removeClass("hide")
    }
    function reall() {
        $(".item,.item1").addClass("hide")
        $(".item input[name]").val("")
    }
    $(".i1").click(function () {
        $(".item,.item1").removeClass("hide")
        var tds=$(".i1").parent().prevAll()
        var port=$(tds[0]).text()
        var ip=$(tds[1]).text()
        $('.item input[name="port"]').val(port)
        $('.item input[name="ip"]').val(ip)
    })
    $(".del").click(function () {
        $(this).parent().parent().remove()
    })
</script>
</html>

模拟对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            background-color: #dddddd;
            height: 20px;
            margin: 0 auto;
            width: 500px;
            margin: 0 auto;
        }
        .menu .item{
            float: left;
            padding: 0 10px;
            border-right: red solid 1px;
            cursor: pointer;
        }
        .dide{
            background-color: brown;
        }
        .hide{
            display: none;
        }
        .meng{
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item dide" a="1">菜单一</div>
        <div class="item" a="2">菜单二</div>
        <div class="item" a="3">菜单三</div>
    </div>
    <div class="meng">
        <div class="item1" b="1">内容一</div>
        <div class="item1" b="2">内容二</div>
        <div class="item1" b="3">内容三</div>
    </div>
</body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(".item").click(function () {
            $(this).addClass("dide")
            $(this).siblings().removeClass("dide")
            B=$(this).attr("a")//获取值
            $(".meng").children("[b='"+B+"']").removeClass("hide").siblings().addClass("hide")//拼接字符串
        })
    </script>
</html>

淘宝菜单

posted @ 2016-12-01 18:10 AbeoHu 阅读(186) 评论(0) 编辑收藏举报

刷新页面返回顶部

AbeoHu

JQuery讲解

公告