3.29 学前端 jquery之简介、选择器和筛选器

最新推荐文章于 2024-06-29 17:30:00 发布

yanga11ang

最新推荐文章于 2024-06-29 17:30:00 发布

阅读量243

点赞数

分类专栏： py_web_front end

本文链接：https://blog.csdn.net/yanga11ang/article/details/79738712

版权

py_web_front end 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

一 jquery简介

1 jquery是什么

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2 什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
- 比如：
- $(“#test”).html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
- 这段代码等同于用DOM实现代码： document.getElementById(” test “).innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

var $variable = //jQuery 对象
var variable = //DOM 对象
$(selector).action() //基本语法：

二寻找元素(重要的选择器和筛选器)

2.1 选择器
2.1.1 基本选择器

$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")

2.1.2层级选择器

$(".outer div")  //后代
$(".outer>div")  //子代
$(".outer+div")  //毗邻
$(".outer~div")  //向下找兄弟 找弟弟

2.1.3 基本筛选器

$("li:first") //第一个
$("li:last") //最后一个
$("li:eq(0)")//下标查找
$("li:lt(2)")//小于下标的
$("li:gt(1)")//大于下标的

2.1.4 属性选择器（重要）

$('[id]') //有id属性的的
$('[id="div1"]') //id等于div1的
$('["alex="sb"][id]')

2.1.5 表单选择器

$("[type='text']")
$(":text")  //注意只适用于input标签
$("input:checked")

2.2 筛选器

2.2.1 过滤筛选器

$("li").eq(2) //好处免于字符串拼接
$("li").first()
$("ul li").hasclass("test")//察看

2.2.2 查找筛选器

$("div").children()//所有的儿子，自己的不变
$("div").children(".test")//
$("div").find(".test")  //所有的为test的后代，自己的不变

$(".test").next() //找下一个弟弟
$(".test").nextAll()//找所有的弟弟
$(".test").nextUntil('div6')//找区间里的弟弟 不包含div6

$("div").prev()  //找一个哥哥
$("div").prevAll()//找所有的哥哥
$("div").prevUntil('div6')//找区间里的哥哥 不阿包含div6

$(".test").parent()//找父节点
$(".test").parents()//找到所有的祖先节点们
$(".test").parentUntil('div1') //找到知道div1一下的祖先

$("div").siblings()//找兄弟 上下都找 不包括自己

实例左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>left_menu</title>
    <script src="js/jquery-2.2.3.js"></script>
    <script>
        function show(self){
            // console.log($(self).text())
            $(self).next().removeClass("hide")
            $(self).parent().siblings().children(".con").addClass("hide")
        }
    </script>
    <style>
        .menu{
            height: 500px;
            width: 30%;
            background-color: gainsboro;
            float: left;
        }
        .content{
            height: 500px;
            width: 70%;
            background-color: rebeccapurple;
            float: left;
        }
        .title{
            line-height: 50px;
            background-color: #425a66;
            color: forestgreen;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this);">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单二</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
    </div>
    <div class="content"></div>
</div>
</body>
</html>

实例 tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="js/jquery-2.2.3.js"></script>
    <script>
        function tab(self){
            var index=$(self).attr("xxx");
            $("#"+index).removeClass("hide").siblings().addClass("hide");
            $(self).addClass("current").siblings().removeClass("current");
        }
    </script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            /*border: 1px solid red;*/
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .menu a{
            border-right: 1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: darkgray;
            color: yellow;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
    <div class="tab_outer">
        <ul class="menu">
            <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
            <li xxx="c2" onclick="tab(this);">菜单二</li>
            <li xxx="c3" onclick="tab(this);">菜单三</li>
        </ul>
        <div class="content">
            <div id="c1">内容一</div>
            <div id="c2" class="hide">内容二</div>
            <div id="c3" class="hide">内容三</div>
        </div>
    </div>
</body>
</html>

yanga11ang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.29 学前端 jquery之简介、选择器和筛选器

一 jquery简介1 jquery是什么 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，...
复制链接

扫一扫