您的位置：首页 > Web前端 > JQuery

JQuery入门（含选项卡案例）

2019-03-25 15:26 197 查看

JQuery是前端的一个框架

起初在做JQuery的时候抱着的理念是：最少的代码，实现最多的功能！

截止2019.03.25今天我写这篇文章，现在市面上流行的JQuery版本主要是1代和2代版本

兼容IE6的话用1代，不兼容的话就2代，3比较新可能还有问题。

JQuery元素选择器

$()

看下面代码也许会给你启发

//记得引入
<script src = 'jquery-1.10.1.min.js'></script>
<script>
window.onload = function(){
//拿 id = div1
$("#div1").css("backgroundColor", 'red');
//拿 .box
$(".box").css("backgroundColor", 'blue');
//拿 div
$("div").css("backgroundColor", 'orange');
//拿 有title=world属性的
$("[title=world]").css("backgroundColor", 'yellow');
//拿 有name=hello属性的
$("[name=hello]").css("backgroundColor", "green");
}
</script>

<body>
<div id = 'div1'>div1</div>
<div class = 'box'>div2</div>
<div name = 'hello' title="world">div2</div>
<div name = 'hello'>div2</div>
<div class = 'box'>div2</div>
</body>

JQuery拿到想更改的标签

<script>
window.onload = function(){
//获得第一个li标签
$("ul li:first").css("backgroundColor", 'blue');
//获得最后一个li标签
$("ul li:last").css("backgroundColor", 'blue');
//获得下标3的li标签
$("ul li:eq(3)").css("backgroundColor", 'blue');
//奇数位li标签
$("ul li:odd").css("backgroundColor", 'blue');
//偶数位li标签
$("ul li:even").css("backgroundColor", 'yellow');
}
</script>
<body>
<ul>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
</ul>
<ol>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
</ol>
</body>

JQuery多种表达式写法

eq（）
这个是找到下标

filter（）
这个是过滤

<script>
window.onload = function(){
//写在里面
$("ul li:eq(2)").css("backgroundColor", 'red');
//写在外面
$("ul li").eq(2).css("backgroundColor", 'red');
//找class是box
$("ul .box").css("backgroundColor", 'blue');
//筛选出哪个li的class是box
$("ul li").filter(".box").css("backgroundColor", 'orange');
}
</script>

<body>
<ul>
<li class = 'box'>11111111</li>
<li>11111111</li>
<li title = 'hello'>11111111</li>
<li title = 'hello'>11111111</li>
<li>11111111</li>
<li class = 'box'>11111111</li>
</ul>
<ol>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
</ol>
</body>

JQuery的方法函数化

在JQuery中几乎很难见到等号

比如说类似于我们之前一直写的window.onload这个方法在JQ中就有自己的写法

代码：

//这就是window.onload
$(function(){

//获取h1标签中的innerHTML
alert($("h1").html());  //取值的时候，获取的是第一个的值

//JQ中赋值，批量操作
$("h1").html("xxxx"); //JQ中赋值，批量操作

// 输出input的value
alert($("input").val());

//给input的value赋值
$("input").val("我是被赋值的值");
})

<h1>hello world</h1>
<h1>world hello</h1>
<input type="text" value = '这是原来的值'>
<input type="text">

JQuery的链式操作

$(function(){

//给h1添加点击事件
$("h1").click(function(){
$(this).css("backgroundColor", 'red');//背景变红
})

//给h1添加鼠标事件
$("h1").mouseover(function(){
$(this).css("backgroundColor", 'orange');
})

//给h1添加鼠标事件
$("h1").mouseout(function(){
$(this).css("backgroundColor", 'blue');
})

//h1的样式更改
$("h1").css("height", 500);

//h1的点击事件
$("h1").click(function(){
$(this).css("backgroundColor", 'red');
//注意这个是css的写法，JQ和css不能混用，不能直接this.css("back...")
this.style.backgroundColor = 'red';
//添加事件
}).mouseover(function(){
$(this).css("backgroundColor", 'orange');
//继续追加事件
}).mouseout(function(){
$(this).css("backgroundColor", 'blue');
}).css("height", 500);
})

JQuery的css方法

可以像对象那样排着写样式

$(function(){
$("div").click(function(){
$(this).css({
width: "300px",
height: 200,
backgroundColor: "blue"
})
})
})

JQuery里的一些方法


filter	过滤已经找到的元素节点
not	除此之外的节点全找到
has	包含着子节点
find	查找子节点中符合条件的元素
next	找兄弟元素的下一个节点
prev	找兄弟元素的上一个节点
eq	下标是XXX
attr	设置和获取元素行间属性

就不跟代码了，大家自己试一试，没有难点。

JQuery写选项卡

跟一个案例

script的内容每一句都有详细解释

<style>
#div1 .active{background-color: orange}
#div1 button{width: 100px; height: 30px; background-color: gray; font-size: 18px; color: blue}
#div1 div{width: 400px; height: 400px; border: 1px  solid black; display: none}
</style>

<script src = "../jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#div1").find("button").click(function(){//给所有按钮加点击事件
$("#div1").find("button").attr("class", "");//先给所有按钮的class设为空
$(this).attr("class", "active");//给点的这个按钮class设为active
$("#div1").find("div")//找到div1下的div
.css("display", "none")//给显示内容的div设为display:none;
.eq($(this).index()).css("display", 'block');//给点击按钮对应下标的显示内容div样式设为display:block;
})
})
</script>

<div id = 'div1'>
<button class = 'active'>钢铁侠</button>
<!-- index = 0 -->
<button>黑寡妇</button>
<!-- index = 1 -->
<button>绿巨人</button>
<!-- index = 2 -->
<div style = 'display: block'>选项卡1内容</div>
<div>选项卡2内容</div>
<div>选项卡3内容</div>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JQuery入门 （含选项卡案例）