jQuery学习笔记
jQuery框架
* 由于JavaScript语言中的和页面相关的内容比较繁琐，jQuery的出现就是解决此问题，可以让程序员更高效的开发页面动态效果。
* 如何使用jQuery框架？
此框架就是一个外部的js文件，通过script标签的src属性引入到HTML页面即可使用
<!--引入入jQuery框架-->
<script src="../js/jquery-1.4.2.js"></script>
<script>
//给按钮添加点击事件
/* //js动态绑定事件
let b1=document.getElementById("b1");//现在的谷歌浏览器等会自动添加这行代码，但是有的浏览器不会，所以为了兼容性还得写
b1.onclick=function () {
alert("按钮被点击了");
}*/
//jQuery写法
//jquery中的事件的名称和js中的事件的名称比较，去掉了on
$("#b1").click(function () {
//alert("按钮被点击了！");
/*let a=document.getElementById("d1");
let b=document.getElementById("i1");
a.innerText=b.value;*/
//等效上面三行代码
$("#d1").text($("#i1").val())
//document.getElementById("i1"); 获取到的是js对象，表示文本框
//$("#i1")获取到的是jQuery对象，也表示文本框
});
</script>
* js对象和jQuery对象不是同一种对象，彼此的方法也不能互相调用
* js对象和jQuery对象的互相转换
* js转jQuery
let jq=$(js);
* jQuery转js
let js=jq[0];
<body>
<input type="text" id="i1">
<input type="button" value="js转jq" id="b1">
<input type="button" value="jq转js" id="b2">
<!--引入jQuery框架-->
<script src="../js/jquery-1.4.2.js"></script>
<script>
//先给按钮绑定单击事件
$("#b1").click(function () {
//获取js对象
let js=document.getElementById("i1");
//js对象转为jQuery对象
let jq=$(js);
//调用jq的方法val()验证是否转换成功
alert(jq.val())
});
$("#b2").click(function(){
//得到jq对象
let jq=$("#i1");
//把jq对象转成js对象，jq对象本质上是一个数组，里面装的是js
//此时通过id选择器获取到的jq数组里面只有一个元素，就是jq[0]
let js=jq[0];
alert(js.value);
});
</script>
</body>
$("选择器")，jQuery的这个通过选择器选择元素的写法可以理解成是一个方法，它返回的jQuery对象是一个数组，而这个jQuery对象里面装的就是js对象
jquery中的选择器
* 基础选择器 用法和css一样
标签名 $("div")
id选择器 $("#id")
class类选择器 $(".class")
分组选择器 $("div,#id,.class")
任意元素选择器$("*")
* 层级选择器
$("div span") 匹配div里面的所有span 子孙后代选择器
$("div>span") 匹配div里面的子元素span 子元素选择器
* 层级相关方法:
$("#abc").next("span") 匹配id为abc元素的弟弟元素
$("#abc").nextAll() 匹配id为abc元素的弟弟们元素
$("#abc").prev() 匹配id为abc元素的哥哥元素
$("#abc").prevAll() 匹配id为abc元素的哥哥们元素
$("#abc").siblings() 匹配id为abc元素的所有兄弟元素
$("#abc").parent() 匹配id为abc元素的父元素
$("#abc").children() 匹配id为abc元素的子元素们
* 过滤选择器
$("div:first") 匹配所有div中的第一个div
$("div:last") 匹配所有div中的最后一个
$("div:eq(n)") 匹配下标为n的div n从0开始
$("div:lt(n)") 匹配下标小于n的div n从0开始
$("div:gt(n)") 匹配下标大于n的div n从0开始
$("div:not(.abc)") 匹配class值不是abc的div
$("div:even") 匹配下标为偶数的div
$("div:odd") 匹配下标为奇数的div
* 内容选择器
$("div:has(p)")匹配包含p子元素的div
$("div:empty") 匹配空的div
$("div:parent") 匹配非空的div
$("div:contains('xxx')") 匹配包含xxx文本的div
* 可见选择器
$("div:visible") 匹配所有显示的div
$("div:hidden") 匹配所有隐藏的div
* 显示隐藏相关方法:
$("#abc").show() 让id为abc的元素显示
$("#abc").hide() 让id为abc的元素隐藏
$("#abc").toggle() 让id为abc的元素显示隐藏切换
* 属性选择器
$("div[属性名]") 匹配包含xxx属性的div
$("div[属性名='值']") 匹配xxx属性=xxx值的div
$("div[属性名!='值']") 匹配xxx属性不等于xxx值的div
* 子元素选择器
$("div:first-child") 匹配是div并且是子元素并且是第一个子元素
$("div:last-child") 匹配是div并且是子元素并且是最后一个子元素
$("div:nth-child(n)") 匹配是div并且是子元素并且是第n个子元素 n从1开始
* 表单选择器
$(":input") 匹配表单中的所有控件
$(":password") 匹配所有密码框
$(":radio") 匹配所有单选
$(":checkbox") 匹配所有多选
$(":checked") 匹配所有选中的单选/多选和下拉选
$("input:chekced") 匹配所有选中的单选和多选
$(":selected") 匹配所有选中的下拉选
* 遍历其相应选择器返回的数组
//弹出所有 :checked 元素的value值" id="b4"
$("#b4").click(function(){
//只能取到数组的第一个元素的value值
//alert($(":checked").val());
//遍历数组的每一个元素
$(":checked").each(function(){
//遍历的过程中this代表遍历的每一个“js对象”
alert(this.value);
});
});
注意：
$("input:eq(0)").val()
当input的属性为text时获取到的是输入框输入的内容
当input的属性为button的时候获取到的是input的value值
jQuery中和页面相关内容
1. 创建元素对象
let d = $("xxxx ");
2. 添加到页面中
父元素.append(新元素); //添加到父元素里面的最后面
父元素.prepend(新元素); //添加到父元素里面的最前面
3. 插入元素
兄弟元素.before(新元素); //插入到兄弟元素的前面
兄弟元素.after(新元素); //插入到兄弟元素的后面
4. 删除元素
元素对象.remove();
5. 获取和修改元素的文本内容 等效 innerText
元素对象.text(); 获取
元素对象.text("xxx"); 修改
6. 获取和修改控件的值
控件对象.val(); 获取
控件对象.val("xxx"); 修改
7. 获取和修改元素的html内容 等效 innerHTML
元素对象.html(); 获取
元素对象.html(标签内容);修改
8. 获取和修改元素的样式
元素对象.css("样式名","样式值"); //修改样式值
元素对象.css("样式名"); //获取样式值
元素对象.css({"样式1名":"值","样式2名":"值"}); //批量操作样式
9. 获取和修改元素的属性
元素对象.attr("属性名","值"); 修改
元素对象.attr("属性名"); 获取
hover方法
此方法是将鼠标移入和鼠标移出两个事件方法合并成的一个
//鼠标移入移出事件方法 $("div").hover(function () {//鼠标移入时触发 $(this).css("color","red"); },function () {//鼠标移出时触发 $(this).css("color","green"); })
动画相关
$("input:eq(0)").click(function(){
$("img").hide(2000,function () {
alert("动画执行完了");
});
});
$("input:eq(1)").click(function () {
$("img").show(2000,function(){
alert("动画显示完了");
});
});
//淡出
$("input:eq(2)").click(function () {
$("img").fadeIn(2000);
});
//淡入
$("input:eq(3)").click(function () {
$("img").fadeOut(2000);
});
//上滑
$("input:eq(4)").click(function(){
$("img").slideUp(2000);
});
//下滑
$("input:eq(5)").click(function(){
$("img").slideDown(2000);
});
//自定义
$("input:eq(6)").click(function(){//此处图像是相对定位，相对于图像的初始位置
$("img").animate({"left":"200px"},1000)//图片向右移动200px
.animate({"top":"200px"},1000)//图片向下移动200px
.animate({"left":"0"},1000)//图片向左移动200px
.animate({"top":"0"},1000)//图片向上移动200px
.animate({"width":"400px","height":"300px"},1000)//图片放大一倍
.animate({"width":"200px","height":"150px"});//图片缩小回原尺寸
});
Bootstrap框架
此框架对前面接触的HTML/CSS/JavaScript/jQuery内
容进行了封装, 可以让程序员更高效的开发前端页面,
前端页面工作量最大的就是CSS样式代码,使用此框架
可以大大降低CSS的代码量
如何使用此框架?
从苍老师文档服务器下载相关文件 把 bootstrap3
和template文件夹复制到webapp目录下
每次创建新的html页面时 复制template文件夹中
的starter.html 改名
BootStrap文档介绍
全局CSS样式: 对HTML中现有的一些标签做了重新定
义, 包括按钮/图片/表单等.
组件: 多个元素的组合 称为组件
响应式布局
根据不同的设备显示不同的效果
设备分为: 手机/平板电脑/pc电脑/大尺寸显示器
媒体查询: 是BootStrap框架中实现响应式布局的实现
方式 , 在Bootstrap使用媒体查询实现响应式布局
瀑布流相关代码
1. HTML相关<div class="grid">
<div class="grid-item">
<a href="">
<img src="images/3.jpg" alt="">
</a>
</div>
...
</div>
2. CSS样式相关
/*瀑布流相关样式*/
.grid-item{
width: 200px;/*设置瀑布流中每一个元素的宽度
为200*/
margin: 0 10px 10px 0; /*设置瀑布流元素之
间的间距*/
}
3. JavaScript相关<!--引入瀑布流相关框架文件-->
<script src="js/masonry.pkgd.min.js">
</script>
<script src="js/imagesloaded.pkgd.js">
</script>
//瀑布流相关 初始化代码
$(".grid").masonry({
itemSelector:".grid-item",//告诉框架选择
到瀑布流元素的选择器是什么
columnWidth:210 //因为css设置每个元素宽度为
200 但是有10个像素的间距
})
浙公网安备 33010602011771号