学习记录3
来源:互联网 发布:东莞房价知乎 编辑:程序博客网 时间:2024/06/06 12:48
学习内容:
1.HTML、CSS、Bootstrap练习(构建jQuery练习平台)
2.jQuery
1.Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感。
每一个指定元素的 id 都是唯一的,并且在每个页面中只能使用一次。
Target用于选中想要的元素,也可以使用jQuery并通过每个按钮各自唯一的 id 来标识出它们。
<div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div></div>
效果如图即是jQuery的一个练习用平台:
2.在之前构建的代码基础之上,加入script元素,在其中添加$(document).ready(function() { });这样就可以在其中添加function,从而被浏览器来选择,操作元素的改变。
3种选择器:元素选择器:
<script> $(document).ready(function() { $("button").addClass("animated bounce"); $(".well").addClass("animated shake"); $("#target3").addClass("animated fadeOut"); });</script>
jQuery还可以:
1.改变CSS样式:通过.css改变target1的字体颜色为red
注意属性color和值red在括号中要用逗号隔开。
$("#target1").css("color","red");
2.通过.prop调整元素的属性
使target1变为不可选
$("#target1").prop("disabled","true");
3.改变元素标记本身
通过.html()可以添加HTML标签和文字到元素,而元素之前的内容都会被方法的内容所替换掉。
em标签用于强调
$('#target4').html("<em>#target4</em>");
4.移除页面上的HTML元素
通过.remove移除target4
$("#target4").remove()
5.把选中的元素加到其他元素中
将target2选中,通过.appendTo移除到right-well中
$("#target2").appendTo("#right-well");
6.拷贝元素
通过.clone.appendTo将target5拷贝并移到left-well中
两个jQuery方法可以连用
$("#target5").clone().appendTo("#left-well");
HTML中许多HTML元素都有子元素,每个子元素都从父元素那里继承了一些属性。通过.children()和.parent()访问子元素和父元素
$("#target1").parent().css("background-color", "red");$("#right-well").children().css("color", "orange");
当然还可以用CSS选择器来选取元素,
target:nth-child(n):n为CSS选择器按照索引顺序(从1开始)选择目标元素的子元素。
注意:jQuery里的索引是从0开始的,也就是说::odd 选择第2、4、6个元素,但是target#2的索引为1,target#4的索引为3,target6索引为5。
$(".target:nth-child(2)").addClass("animated bounce"); $(".target:even").addClass("animated shake"); $(".target:odd").addClass("animated fadeOut");
- shell学习记录---3
- OpenGL学习记录3
- hibernate学习记录3
- java学习记录3
- Hadoop学习记录-3
- Hibernate 学习记录 3
- 多线程学习记录3
- css学习记录3
- ParaviewWeb学习记录3
- 学习记录 - 3
- 3-28学习记录
- 单片机学习记录3
- 学习记录3
- HTML学习记录3
- CSS学习记录3
- js学习记录3
- 学习记录(3)
- Git学习记录<3>
- Java web项目 在线网络考试数据库连接部分代码
- 申请美国名校条件一览 雅思成绩对申请者有最大裨益
- python初学者要注意的问题
- jpa hibernate分页查询
- HTTP协议分析系列(五)------php+socket编程发送http请求
- 学习记录3
- BHuman文档结构
- Perception(0-1.1)
- Perception(1.2)
- Android绘制.9图片新手攻略
- C++C&初步开始(1)
- C++&C&初步开始(2)
- Bootstrap 下拉多选框插件Bootstrap Multiselect
- IPC(中)-进程间通讯方式详解