前端篇—JQuary

最新推荐文章于 2021-11-22 20:38:26 发布

VIP文章 wolf67

最新推荐文章于 2021-11-22 20:38:26 发布

阅读量224

点赞数

分类专栏： JavaScript jQuery 文章标签： html js jQuery

本文链接：https://blog.csdn.net/weixin_42016382/article/details/101746147

版权

文章目录

JQuery

先懂js：我的js博客

JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是 Write Less, Do More! ，即倡导写更少的代码，做更多的事情。
轻量级的js库，jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

下载/复制保存
https://jquery.com/download/
将文件放在自己的项目下调用

jQuery对象

基本语法 $(selector).action()

寻找元素

选择器

基本选择器

通配符：$(’*’);
根据Id：$("#id");
根据class：$(".class");
根据标签名：$(“element”);
多项选择：$("#p1,div,.class");

层级选择器

后代选择器：$(’.div1 p’);
子代选择器：$(’.div1>p’);
兄弟选择器：$(’.div1~p’);(向下找所有兄弟p标签)
毗邻选择器：$(’.div1+p’);

基本筛选器

第一个：$(".div ul li:first");
最后一个：$(".div ul li:last");
索引(从0开始)：$(".div ul li:eq(2)");
小于索引：$(".div ul li:lt(4)");
大于索引：$(".div ul li:gt(4)");

属性选择器

$("[id=‘div1’]"); $("[wolf=‘wolf’];

表单选择器

$(":text");
$(":button");

筛选器

过滤筛选器

$(“li”).eq(2)，用于传参
$(“ul li”).first();
$(“li”).hasclass(‘test’);判断是否有class=‘test’

查找筛选器

子代：$(".div1").children();
- $(".div1").children(’.p1’);
后代：$(".div1").find(’.p1’);
$(".div1").next();
$(".div1").nextAll();
$(".div1").nextUntil(".p6");向下一直到.p6，不包括.p6
$(".div4").prev(‘p’);
$(".div4").prevAll(‘p’);
$(".div4").prevUntil(‘p’);向上一直到.p6，不包括.p6
$(".div4").parent(); 父标签
$(".div4").parentsUntil(".div1"); 叔标签
$(".div4").sibling(‘p’); 上下兄弟标签

示例

1. 二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf</title>
    <style>
        .hide{
   
            display:none;
        }
    </style>
    <script src="jquary-3.4.js"></script>
    <script>
        function func1(self){
   
            $(self).next().removeClass('hide');		// 显示当前菜单
            $(self).parent().siblings().children('.con').addClass('hide');		// 隐藏其他菜单，给其他菜单加上display:none的class
        }
    </script>
</head>
<body>
    <div class="menu">
        <div class="title" onclick="func1(this)">菜单1</div>
        <div class="con">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>
    <div class="menu">
        <div class="title" onclick="func1(this)">菜单2</div>
        <div class="con hide">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>
    <div class="menu">
        <div class="title" onclick="func1(this)">菜单3</div>
        <div class="con hide">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>
    <div class="menu">
        <div class="title" onclick="func1(this)">菜单4</div>
        <div class="con hide">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>
</body>
</html>

效果：点击某一菜单时，显示其菜单，并隐藏其他菜单，仅两行代码
在这里插入图片描述
2.上面的示例中将菜单与内容盒子分开
tip：$(self).attr(‘x’)获取属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf</title>
    <style>
        *{
   
            margin:0;
        }
        #div1{
   
            width:800px;
            height:50px;
            line-height: 50px;
            background: darkturquoise 100px 0;
            margin-left: 500px;
            text-align: center;
            border-bottom: purple solid 3px;
        }
        .title{
   
            float: left;
            width:60px;
        }
        .sel{
   
            color:white;
            background-color: black;
        }
        #div2{
   
            margin-left: 500px;
            width:800px;
            height:1000px;
            border-left: darkturquoise 1px solid;
            border-right: darkturquoise 1px solid;
        }
        .hide{
   
            display: none;
        }
        .con{
   

        }
    </style>
</head>
<body>
    <div id="div1">
        <div x="con1" class="title sel" onmouseover="func1(this)">菜单1</div>
        <div x="con2" class="title" onmouseover="func1(this)">菜单2</div>
        <div x="con3" class="title" onmouseover="func1(this)">菜单3</div>
    </div>
    <div id="div2">
        <div id="con1" class="con">111111111111</div>
        <div id="con2" class="con hide">2222222222222</div>
        <div id="con3" class="con hide">312e12e12e1</div>
    </div>
<script src="jquary-3.4.js"></script>
<script>
    function func1(self){
   
        $(self).addClass('sel').siblings().removeClass('sel'); // 移除菜单标题选中样式
        $(self).parent().next().children('#'+$(self).attr('x')).removeClass('hide').siblings().addClass('hide');		// 隐藏原来的内容，显示当前菜单内容，通过自定义的x属性值，与内容的id，相互关联
    }
</script>
</body>
</html>

属性

jQuery API 中文文档

$(self).attr('old', 'new');	// 改变属性值,可以改变自定义属性值
$(self).attr('xxx');	// 找属性

$(self).attr('checked','true');	// 给复选框打勾
$(self).removeAttr('checked');		// 取消打勾

$(self).prop('checked',true); // 给复选框打勾,
$(self).prop('checked',false);	// 取消打勾

$(self).html()	// 获取html
$(self).text()	// 获取文本
$(self).val();		// 获取值，对于checkbox没选中时默认为on
$(' :checkbox').val();	// --> on
$(' :text').val('xxx');	// 给输入框一个值xxx
$(' :text').val();	// 不加参数则是获取输入框的值

var p1=$('p');	// 创建一个p标签
$(".div1").append(p1);	// 在.div1中插如p1作为子标签，在最后插入
p1.appendTo($('.div1'));	// 将p1标签插入.div1中
.prepend(p1);

最低0.47元/天解锁文章

wolf67

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端篇—JQuary

文章目录JQueryjQuery对象寻找元素选择器筛选器示例先懂js：我的js博客JQueryjQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是 Write Less, Do More! ，即倡导写更少的代码，做更多的事情。轻量级的js库，jQuery兼容各种主...
复制链接

扫一扫