<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BootStrap emmet jquery学习</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script src="/static/js/jquery-3.2.1.js"></script>
<script src="/static/js/bootstrap.js"></script>
<!-- link:css script:src-->
<!-- .container>.row.show>.col-md-4{content}*3-->
<!-- .container>.row.clearpad>(.col-md-8.show{8})+(.col-md-4.show{4})-->
<style>
.show {
border: solid 1px sienna;
height: 50px;
}
.clearpad {
padding: 0;
}
</style>
</head>
<body>
<div class="container " style="border: red 1px solid">
<div class="row">
<div class="col-md-5 show"></div>
<div class="col-md-3 show"></div>
<div class="col-md-4 clearpad"> <!--col-md-4样式嵌套-->
<div class="col-md-4 show"></div>
<div class="col-md-4 show"></div>
<div class="col-md-4 show"></div>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<form action="" role="form" class="form-inline">
<div class="form-group">
<label for="name" class="sr-only">用户名：</label>
<input id="name" type="text" class="form-control" placeholder="用户名">
</div>
<div class="form-group">
<label for="name">服务名：</label>
<input id="name" type="text" class="form-control" placeholder="服务名">
</div>
<button class="btn btn-info">提交</button>
</form>
</div>
</div>
</div>
<!--#header p#header-->
<!--a:link a:mail-->
<!--div>div>span^p^p ^表示前一标签的上级-->
<!--div[background-color="pink"]{div_content} []加入属性-->
<!--div[height="50px" style]{div_content} []加入属性height, style-->
<!--ul>li*8>a:link{导航item} 每个li标签下都有一个a标签-->
<!--ul>li*8>a:link{导航$$$$@-100} $数字占位符@指定从几开始，-表示倒序，$前必须有>符号-->
<!--h2>{H2标题}+small{我是副标题} {}表示文本结点的内容，前加标签表示标签内的文本内容-->
<h2>H2标题<small>我是副标题</small></h2>
<p class="text-lowercase" >PHP</p>
<hr>
<span>×</span> <!--输出乘号-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
主体
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<hr>
<a href="javascript:void(f())">javascript</a><!--调用js函数的语法，注意有返回值-->
<script>
function f() {
alert("hello, javascript!");
}
</script>
<!--以下是jQuery学习-->
<hr>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
<div class="alert alert-info" id="result"></div>
<button id="button1">好好学习</button>
<button id="button2">科学学习</button>
<img src="3.png" id="img1" width="150px" title ="no beauty, no life" >
<form action="#">
<input type="checkbox" name="vehicle[]" value="Bike" checked> 我有一辆自行车<br>
<input type="checkbox" name="vehicle[]" value="Car" disabled> 我有一辆小轿车<br>
<input type="radio" value="Boat" checked> 我有一艘船<br>
<input type="submit" value="提交"><input type="button" value="按钮"><input type="button" value="禁用按钮" disabled>
</form>
<script>
// jQuery对象的参数有4种：
// 1. CSS选择器，字符串形式；
// 2. DOM对象、XML DOM对象、BOM对象 将其封装在类似集合的jQuery对象，用[]或get()方法提出封闭的DOM对象
// 3. HTML文本，字符串形式，它创建指定的DOM的jQuery对象，并返回
// 4. JS函数，它将此函数注册为document的ready事件的Handler
$(function () { //ready Handler
$('#button1').click(function () {
$('p').css("color", "red").hide(3000);
$("<h3>创建标题</h3>").appendTo(document.body);
$('ul')[0].style.background = 'sienna'; //$(selector)返回的对象不是数组，可能是类似集合的对象，即使选择的元素是唯一的也一样
$('li')[1].style.color = "blue"; //[]操作符或get()函数的结果是DOM对象，不是jQuery对象。eq()函数返回的是jQuery对象，其用法同$()返回的对象
});
// 结点对象的属性获取、设置、移除：
// $('#id').attr('class');
// $('#id').attr('class', 'any_class');
// $('#id').removeAttr('class');
// 结点对象的样式获取、设置、移除
// $('#img1').css('border-radius')
// $('#img1').css('border-radius', "50%"); // 支持JS陀峰命名，前者等价于 $('#img1').css('borderRadius', "50%");
// $('#img1').css({'border-radius': "50%", "border-shadow": "5px 5px 5px #0f0"}); // 成组设置，以对象形式传入
// $('#img1').css('border-radius', function(index, currentValue){return 20%;}); // 支持JS回调设置
// $('img').css('box-shadow', ""); 移除，后一个参数不能是undefined，应是字符串类型
// CSS类操作
// addClass();removeClass();toggleClass();hasClass()
// $('#img1').addClass('img-circle')
// $('#img1').hasClass('img-circle')
// 元素内容操作 text() html()
// $('li').eq(1).text("<strong>Paisley</strong>") 转义后原样显示
// $('li').eq(1).html("<strong>Paisley</strong>") 不转义，解析后，粗体显示
// $('li').eq(1).text() 只获取文本内容，无样式，无标签
// 选择器有：简单选择器，组合选择器，选择器组
// 属性选择器：$("[title]") $("[title='boys']") $("[title!='boys']") $("[title^='boys']")
// $("[title$='boys']") $("[title*='boys']") //模式匹配
// $("[title~='boys']") // 单词匹配，字符串前后有空格的称为单词
// $('[width][src]').removeClass('img-round') // 同时有width, src属性的元素
// 针对表单元素的特殊选择器
// $('input:checked') 选择状态为checked的input标签，包括radio,checkbox标签
// $('input:text') 选择类型为text的input标签
// $('input:checkbox') 选择类型为checkbox的input标签
// $(':button') 选择类型为button的input标签与<button>标签元素
// $(':disabled') 选择状态为disabled的标签，多数标签没有此状态，如<p>, <a>，它们不会被选择。有此状态的标签如：button, checkbox
// 位置过滤器
// $('li:eq(0)') 位置为0的li标签
// $('li:gt(2)') 位置序号大于2的li标签
// $('li:lt(2)') 位置序号小于2的li标签
// $('li:first') 位置为0的li标签
// $('li:last') 位置为最后的li标签
// $('li:even') 位置为偶数的li标签
// $('li:odd') 位置为奇数的li标签
// $('li:nth-child(n)') 所有位置的li标签，全选
// $('li:nth-child(2n)') 所有位置为偶数的li标签，2n可以换为even，n大于0
// $('li:nth-child(2n-1)') 所有位置为奇数的li标签，2n-1可以换为odd，这里的odd结果不同于前数第三个的结果，这里的位置从1开始计
// $('li:nth-child(1)') 位置为0的li标签
// 以上简单选择器的过滤器可以同时起作用过滤一个元素，如：$('li:even:gt(2)')
// 组合选择器
// 通过" ",">","~","+"将简单选择器组合
// 选择器组 用","将多个选择器组合在一起
// 从jQuery集合对象中选择元素
// 根据位置选取
// $('li').first() $('li').last() $('li').eq(number) $('li').slice(begin,end) //结果集中不包括序号为end的对象
// $('li').slice(-number) // 选取最后的number个对象
// 根据自身特征选取
// $('li').filter('.red') //filter方法内的参数与简单选择器的参数类似，它的参数还可以是一个回调，如下：
// $('li').filter(function(index){ return index%2==0;) //取偶数行，index是集合内索引
// filter()是选择符合条件的对象，not()与其用法相同，功能相反，选择不符合条件的对象
// 根据DOM树来找
// $('#id').next() 选取指定元素的下一个元素的jQuery对象
// $('#id').nextAll() 选取指定元素后的所有元素(包括其子孙元素)的jQuery对象
// $('#id').prev() 选取指定元素的上一个元素的jQuery对象
// $('#id').prevAll() 选取指定元素前的所有元素(包括其子孙元素)的jQuery对象
// $('#id').parent() 选取指定元素的父元素的jQuery对象
// $('#id').find("span") 返回被选元素的后代元素的jQuery对象
// $('#id').children() 方法返回被选元素的所有直接子元素的jQuery对象
// 请查看网上资料
// this 当前JS对象 $(this) 封装成jQuery对象
// $(this).append("I am a good soldier") // 在子元素末添加文本结点
// $(this).prepend("I am a good soldier") // 在子元素前添加文本结点
// $(this).after("<h3>I am a good soldier</h3>") // 在本元素后添加标题元素结点
// $(this).before("<h3>I am a good soldier</h3>") // 在本元素前添加标题元素结点
// $(this).replaceWith("<h3>I am a good soldier</h3>") // 将本元素替换为标题元素结点
// $(this).replaceWith("function(){return "<h1>Paisley</h1>"}") // 将本元素替换为回调函数返回的标题元素结点
// $('a').clone().appendTo('#linkList') // 克隆对象并将复制的对象添加到id为#linkList的元素内的末尾
// $('h3').wrap("<div></div>") // 在每个h3标签外套一个div标签
// $('h3').wrapAll("<div></div>") // 在所有h3标签作为整体外套一个div标签，多个h3标签间含有其它元素时，会重排涉及到的元素，将h3连续排列，再外套一个div标签
// $('h3').wrapAll("<div><p></P></div>") // 在所有h3标签作为整体外套一个p标签，再外套一个div标签
// $('h3').wrapInner("<span></span>") // 在h3标签内嵌入一个span标签，此标签包装h3所有的子元素
// $('body').remove() // 删除body元素 删除选中的元素
// $('div *').remove('p') // 删除选中元素当中的p元素
// $('div').empty() // 删除选中元素的所有子元素
// 向页面中已存在的元素添加事件 $('#img1').click(function(){})
// 给动态创建的或已存在的元素添加事件 $('#img1').bind('click', function(){})
// 给动态创建的或已存在的元素删除事件处理 $('#img1').unbind('click') $('#img1').unbind()
// on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
// 自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法
// 如需移除事件处理程序，请使用 off() 方法。
// 如需添加只运行一次的事件然后移除，请使用 one() 方法。
// 动画特效---动画函数调用时，将动画加入动画队列，立即返回
// $('div').show() $('div').show(5000) $('div').show("slow") 由小到大显示所选元素
// $('div').show("slow", function(){}) 显示所选元素，显示完成后调用回调函数
// $('div').hide() 由大到小隐藏所选元素，它也有类似show()的多种用法
// $('#img1').fadeIn("slow") $('#img1').fadeIn("fast", function(){}) 淡入完成后调用回调函数
// $('#img1').fadeOut("slow") $('#img1').fadeOut("fast", function(){}) 淡出完成后调用回调函数
// $('#img1').fadeToggle("slow") $('#img1').fadeToggle("fast", function(){}) 淡出/淡入完成后调用回调函数
// $('#img1').fadeTo("slow", 0.6) $('#img1').fadeTo("fast", 0.4, function(){}) 褪色完成后调用回调函数，褪色级别(即opacity)的范围0到1,0表示透明。元素的排版空间不变，上面几个fade函数改变了display
// $('#img1').slideDown(5000) $('#img1').slideDown() $('#img1').slideDown(5000, function(){}) // 展开效果，height变化的结果
// $('#img1').slideUp(5000) $('#img1').slideUp() $('#img1').slideUp(5000, function(){}) // 收缩效果，height变化的结果
// $('#img1').slideToggle(5000) $('#img1').slideToggle() $('#img1').slideToggle(5000, function(){}) // 收缩/展开效果，height变化的结果
// $("div").animate({left:'250px',height:'300'},2000,function(){alert ("kkk")}); 第一个参数中不支持颜色的过渡，想支持须另外下载jQuery插件
// $("div").stop(continueQueue=false,toEnd=false); //停止当前动画，适用于任何动画效果。
// continueQueue表示是否清除动画队列；toEnd为true表示停止在最后一帧
// AJAX方法，参看https://www.runoob.com/jquery/jquery-ref-ajax.html ajax发送前也是有事件的
// $.ajax({name:value, name:value, ... })
// $("#div1").load(URL,data,callback); 将返回数据赋予ID为div1元素的innerHtml. URL为html,xml文件时，可在URL中加入选择符以选择部分内容，data为发送的数据，callback为收到数据的回调，回调中的this指向div1元素
// $("#div1").load("demo.json", function(data) {
// var jsonobject = JSON.parse(data); // data还需解析
// this.empty() //删除子元素
// ->append("<p>name: <span>" + jsonobject.name + "</span></p>"); // 加入数据
// }); 将返回数据赋予ID为div1元素的innerHtml. URL为html,xml文件时，可在URL中加入选择符以选择部分内容
// $.get(URL,data,callback);
// $.get("demo.xml", function(data){
// 返回的数据为xml格式时，data为XML DOM树，其它情况下，data为字符串
// var name = $(data).children("name").text;
// var html = "<p>" + name + "</p>";
// $('#div1').html(html);
// });
// $.getJSON()为$.get()简写版本，专门用于获取json数据，回调中的数据已转化为json对象
// $.getScript()
// $(selector).post(URL,data,function(data,status,xhr),dataType)
$('#button2').click(function () {
});
});
function showResult(data) {
$('#result').text(data);
}
</script>
<p>段落01</p>
<p>段落02</p>
<p>段落03</p>
</body>
</html>