JQuery基本操作

(1)jQuery加载

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery加载</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// alert();//弹出function (a,b){return new n.fn.init(a,b)}表示JQuery已经引进来了，这是它的一个构造函数 //JS写法 window.onload = function(){ var oDiv = document.getElementById('div'); alert(oDiv.innerHTML);//这是一个div元素 } //jQuery的完整写法 //比上面JS写法先弹出，因为window.onload是把页面元素加载、渲染完才弹出，而ready()是把所有页面的节点加载完之后就弹出了，不用等渲染了 /*(document).ready(function(){
var div =('#div');
alert('jQuery:' + div.html());//jQuery:这是一个div元素 })*/ //简写方式(function(){
var div =('#div');//CSS样式怎么写，这里就怎么写
//html()方法相当于原生JS的innerHTML
alert($div.html() + 'jQuery');
})
</script>
</head>
<body>
<div id="div">这是一个div元素</div>
</body>
</html>
(2)jQuery选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<style type="text/css">
#div1{
color: red;
}
.box{
color: green;
}
.list li{
margin-bottom: 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
(function(){ //选择元素的规则和css样式相同('#div1').css({color: 'pink'});
('.box').css({fontSize: '30px'});('.list li').css({
background: 'green',
color: '#fff',
fontSize: '20px',
marginBottom: '10px'
});
})
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<div class="box">这是第二个div元素</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
(3)选择集转移

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择集转移</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
(function(){ //prev()是同级的上一个元素，prevAll()是同级的上面所有的元素 //next()是同级的下一个元素，nextAll()是同级的下面所有的元素 //修改#div1的下一个元素的样式('#div1').next().css({color: 'red'});
//修改#div1的下面所有p标签设置样式
('#div1').nextAll('p').css({color: 'red'}); //选择上一级的父元素 /*('#span01').parent().css({
width:'100px',
height:'100px',
background:'gold'
})/
//获取祖级用('#span02').parent().parent()不可取，可用closest('div')获取离span02最近的div //closest可以选择离自己最近的元素，元素可以是父级，也可以是子集('#span01').closest('div').css({
width:'200px',
height:'200px',
background:'pink'
})
/
('.list li')与('.list').children()的区别：
原始的选择集不一样
('.list li')不能通过end()回到父级('.list').children()可以通过end()回到父级
*/
('.list').children().css({ background:'gold', height:'30px', marginBottom:'10px' }).end().css({ background:'green' }) //eq(2)是选择索引等于2的第三个li，siblings()表示除第三个之外的其它兄弟li('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});
//find()是选择div内的class等于link1的元素
$('#div2').find('.link1').css({color:'red'});
})
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<div>这是第二个div元素</div>
<p>这是一个p元素</p>

<div>
    <p>
        <a href="#">腾讯网</a>
        <span id="span01">span元素</span>
    </p>
</div>

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

<ul class="list2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<div id="div2">
    <p>
        <a href="#" class="link1">腾讯网</a>
    </p>
</div>

</body>
</html>
(4)jQuery样式操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery样式操作</title>
<style type="text/css">
.div2{
color: red;
}
.big{
font-size: 30px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
(function(){ /*jQuery用同一个函数即可以取值、也可以赋值*/ //读取样式 alert(('#div1').css('fontSize'));//16px
//设置（写入）样式
('#div1').css({background:'gold'}); //增加行间样式('#div1').addClass('big');
//减少行间样式，多个样式用空格分开
$('#div1').removeClass('div2 big');
})
</script>
</head>
<body>
<div id="div1" class="div2">这是一个div元素</div>
</body>
</html>
(5)click事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>click事件</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
}
.sty{
background-color: green;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
(function(){ // 给按钮绑定click事件('#btn').click(function(){
//重复切换sty样式
$('.box').toggleClass('sty');
})
})
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<div class="box"></div>
</body>
</html>
(6)jQuery索引值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery索引值</title>
<style type="text/css">
.list li{
height: 30px;
margin-bottom: 10px;
background-color: gold;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
(function(){('.list li').click(function(){
// alert(this.innerHTML);//弹出标签中的内容
alert($(this).index());//弹出下标
})
})
</script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
(7)jQuery做选项卡

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery做选项卡</title>
<style type="text/css">
.btns{
width: 500px;
height: 50px;
}
/选项卡的样式/
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;/默认灰色/
color: #666;
border: 0px;
}
/被选中的选项卡的样式/
.btns input.cur{
background-color: gold;
}
/内容区的样式/
.contents div{
width: 500px;
height: 300px;
background-color: gold;
display: none;/默认隐藏/
line-height: 300px;
text-align: center;
}
/被选中的内容区的样式/
.contents div.active{
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
(function(){('#btns input').click(function() {
//this是原生的对象
// alert(this);//弹出[object HTMLInputElement]，说明this就是当前点击的input元素
//jQuery的this对象使用时要用()包起来，这样就可以调用jQuery的方法了 //给当前元素添加选中样式，为兄弟元素移除选中样式(this).addClass('cur').siblings().removeClass('cur');
//(this).index()获取当前按钮所在层级范围的索引值 //显示对应索引的内容区，隐藏其它兄弟内容区('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
</script>
</head>
<body>
<div class="btns" id="btns">
<input type="button" value="tab01" class="cur">
<input type="button" value="tab02">
<input type="button" value="tab03">
</div>
<div class="contents" id="contents">
<div class="active">tab文字内容一</div>
<div>tab文字内容二</div>
<div>tab文字内容三</div>
</div>
</body>
</html>
(8)jQuery属性操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery属性操作</title>
<style type="text/css">

</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        /*
        alert($('.box').html());//这是一个div元素
        $('.box').html('<a href="http://www.baidu.com">百度网</a>');
        */
        /*
        读写值为布尔类型的属性用prop方法
        读写值为非布尔类型的属性用attr方法
        */
        /*
        $('.box').attr({title:'这是一个div!'});//写入title属性，并赋值
        alert($('.box').attr('class'));//读属性class的值，弹出box
        */
        /*
        var $src = $('#img1').attr('src');
        alert($src);//img/1.png
        $('#img1').attr({
            src:'img/2.gif',
            alt:'图片二'
        });
        */
        /*
        alert($('#check').prop('checked'));//选中为true，非选中为false
        $('#check').prop({checked:true});//设置默认勾选
        */
        // alert($('.box2').html());//<span>这是div元素内的span</span>
        alert($('.box2').text());//这是div元素内的span
    })
</script>

</head>
<body>
<div class="box">这是一个div元素</div>

<img id="img1" src="img/1.png" alt="一张图片">

<input type="checkbox" id="check">多选

<div class="box2">
    <span>这是div元素内的span</span>
</div>

</body>
</html>
(9)jQuery特殊效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery特殊效果</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
(function(){('#btn').click(function(){
// ('.box').fadeOut();//淡出 //('.box').fadeIn();//淡入
// ('.box').fadeToggle();//切换淡入淡出 //('.box').toggle();//切换显示隐藏
$('.box').slideToggle();//切换上收和下展
})
})
</script>
</head>
<body>
<input type="button" name="" value="效果" id="btn">
<div class="box"></div>
</body>
</html>
(10)jQuery动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
(function(){ /* 参数： 1、什么属性做动画，属性设置{param1: value1, param2: value2} 2、动画执行的时间，单位毫秒 3、动画曲线： swing（默认值）开始和结束慢，中间快 linear匀速 可省略不写 4、回调函数，动画完成之后要做的事情，可无限嵌套 */('#div1').animate({
width: 200,
height: 200},
1000,
function(){
// alert('动画完了！');
(this).animate( {marginLeft: 500}, 1000, function(){(this).animate(
{marginTop: 500},
1000
)
}
)
}
);
})
</script>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
(11)jQuery循环

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery循环</title>
<style type="text/css">

</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        // //给全部的li设置内容和样式
        // $('.list li').html('111');
        // $('.list li').css({background:'gold'});
        //第一个参数index是索引值
        $('.list li').each(function(index) {
            // alert(index);//弹出索引值
            
            //$(this)是每一个li
            $(this).html(index);
        });
    })
</script>

</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 195,653评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,321评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 142,833评论 0赞 324
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,472评论 1赞 266
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,306评论 4赞 357
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,274评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,658评论 3赞 385
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,335评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,638评论 1赞 293
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,697评论 2赞 312
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,454评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,311评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,699评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,986评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,254评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,647评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,847评论 2赞 335

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,347评论 1赞 45
  • JQ
    通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。 jQuer...
    枇杷树8824阅读 647评论 0赞 3
  • 当诗老了
    当诗歌老了， 天空里不在飞翔着雄鹰， 雨云沉浸在没有边际的冬天里， 公交车一站又一站地复读着人生， 快马驮着草原渐...
    百字生阅读 178评论 0赞 11
  • 2017-06-13
    当自己守护着花开花谢时 你会发现人生不过如此 那相等的 看透爱情后剩下都是沧桑 每次看绝无伧比风景时 景色能映化出...
    不羁自牧阅读 129评论 0赞 0