<!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>&times;</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”>&times;</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>

版权声明:本文为慕虎原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/muhu08120559/p/16849365.html