Bootstrap是用于设计响应性网页和应用程序的前端框架。它采用移动优先的web开发方法,包括预构建的CSS样式和类,以及一些JavaScript功能。可以使用Bootstrap构建响应性网站,使用其包含的类可以设置按钮、图像、表单、导航和其他常见元素的样式。 jQuery是世界上使用最广泛的JavaScript库之一。2006年发布时,所有主流浏览器处理JavaScript的方式略有不同。jQuery简化了编写客户端JavaScript的过程,并确保代码在所有浏览器中都能以相同的方式工作。使用jQuery可以选择、删除、克隆和修改页面上的不同元素。 文档就绪函数:
<!--当前位于html页面-->
<script> $(document).ready(function(){}); </script>
放入此函数中的代码将在浏览器加载页面后立即运行,这很重要,因为如果没有文档就绪功能,代码可能会在HTML呈现之前运行,这会导致错误。所有jQuery函数都以美元符$开头。jQuery通常使用选择器选择HTML元素,然后对该元素执行某些操作。例如:
<script> $(document).ready(function() { $("button").addClass("animated bounce"); $(".well").addClass("animated shake"); $("#target3").addClass("animated fadeOut"); $("button").removeClass("btn-default"); $("#target1").css("color","red"); $("#target1").prop("disabled",true); $("#target4").text("<em>#target4</em>"); $("#target4").html("<em>#target4</em>"); $("#target4").remove(); $("#target2").appendTo("#right-well") $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color","red"); $("#right-well").children().css("color","orange"); $(".target:nth-child(2)").addClass("animated bounce"); $(".target:odd").addClass("animated shake"); $(".target:even").addClass("animated shake"); $("body").addClass("animated hinge"); }); </script>
解析:
第一句用$("button")选择所有button按钮,然后用.addClass("animated bounce")给这些按钮添加CSS类。
第二句用$(".well")选择所有带类名.well的元素,然后用.addClass("animated shake")给这些元素添加CSS类。
第三句一样的意思,选出带有id的元素。
第四句使用jQuery的.removeClass()函数删除添加到button中的btn-default类。
第五句使用jQuery的.css()函数将id为target1的元素的color改为red。
第六句使用jQuery的.prop()函数将id为target1的元素的disabled属性改为true。
第七句使用jQuery的.text()函数将id为target4的元素的文本改为<em>#target4</em>。
第八句使用jQuery的.html()函数将id为target4的元素的文本改为#target4并用em标签强调该文本。
第九句使用jQuery的.remove()函数将id为target4的元素从页面中删除。
第十句使用jQuery的.appendTo()函数将id为target2的元素移动到id为right-well的元素里的末尾。
第十一句使用jQuery的.clone()函数将id为target5的元素复制,然后使用.appendTo()函数将复制的元素移动到id为left-well的元素的末尾。这里运用了函数链接,它是使用jQuery完成工作的一种简便方法。
第十二句使用jQuery的.parent()函数获取id为target1的元素的父元素,然后用.css()将获取到的父元素的background-color设置为red。
第十三句使用jQuery的.children()函数获取id为right-well的元素的子元素,然后用.css()将获取到的子元素的color设置为orange。
第十四句使用jQuery的:nth-child(n)语句选取id为.target的元素中的第2个,然后用.addClass()为第2个元素添加类animated、bounce。
第十五句使用jQuery的:odd选取id为.target的元素中第(偶数位)个的元素,然后用.addClass()为这些元素添加类animated、bounce。
第十六句使用jQuery的:even选取id为.target的元素中第(奇数位)个的元素,然后用.addClass()为这些元素添加类animated、bounce。
最后一句表示jQuery也可以以body元素为目标,使用.addClass()为body元素添加了类animated、hinge。
总结jQuery的一些函数:
.addClass()向元素添加类,.removeClass()从元素删除类,.css()设置或更改元素的css样式,.prop()更改元素的属性值,.text()更改元素的文本,.html()不仅能更改元素的文本还能识别文本中的html标签,.remove()完全删除HTML元素,.remove()删除html元素,.appendTo()将元素移动到另一个元素里的末尾,.clone()复制元素,.parent()获取元素的父元素,.children()获取元素的子元素,:nth-child(n)获取符合选择器的第n个元素,
注意,jQuery中索引是从0开始的,这意味着选中的第一个元素的位置为0。
:even选择第1个元素(位置0)、第3个元素(位置2),依此类推。
:odd选择第2个元素(位置1)、第4个元素(位置3),依此类推。
。。。
Bootstrap是用于设计响应性网页和应用程序的前端框架。它采用移动优先的web开发方法,包括预构建的CSS样式和类,以及一些JavaScript功能。可以使用Bootstrap构建响应性网站,使用其包含的类可以设置按钮、图像、表单、导航和其他常见元素的样式。
jQuery是世界上使用最广泛的JavaScript库之一。
2006年发布时,所有主流浏览器处理JavaScript的方式略有不同。jQuery简化了编写客户端JavaScript的过程,并确保代码在所有浏览器中都能以相同的方式工作。使用jQuery可以选择、删除、克隆和修改页面上的不同元素。
文档就绪函数: 标签:jQuery,Bootstrap,函数,元素,&&,animated,id,addClass From: https://www.cnblogs.com/168-h/p/16785517.html