JavaScript学习笔记
JQuery
JQuery是一个JavaScript的函数库
极大简化了JavaScript编程
document.getElementById("id");
//jquery
$("#id")
JQuery的使用
1、下载
下载JQuery文件即可，在使用时导入文件即可
文件分为min.js版本和develop版本
上线使用min版本效率速度更快
开发使用develop版本
遇见$ id undefined 一般是导入有问题
2、通过CDN引用
谷歌和微软的服务器都存有 jQuery,连接使用第三方在线JS文件
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
//status = 200 代表加载成功
JQuery文档加载
建议都写在$()中
<script>
//文档加载完成后再执行
//简写方式
$(
function(){
console.lod("hello jquery")
}
);
//文档加载完成后执行
//等同于window.onload
$(document).ready(
function(){
console.log("hello~~~");
}
)
</script>
JQuery库特性
jQuery 库包含以下特性：
- HTML 元素选取
//使用选择器选取元素 CSS中的选择器
//根据标签
$("标签名")
//根据类选择器
$(".类名")
//根据ID选择器
$("#id名")
//和CSS中的选择器使用方式相同
//获取到整个div
var divIdTag = document.getElementById("divId");
console.log(divIdTag);
//因为获取整个div，就可以获取innnerText
console.log(divIdTag.innerText);
//得到div对象
var divIdTag2 = $("#divId");
//不能使用innnerText
- HTML 元素操作
JS
//元素对象.innerText
//元素对象.innerHTML
JQ
//获取文本
元素.text()
//设置文本
元素.text(文本内容)
//获取html
元素.html()
//设置html
元素.html("html内容")
值
//val()： 获取/设置元素的value属性值
属性
通用属性操作
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性
* attr和prop区别？
1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr
- CSS 操作
第一种
对Class属性的操作
1. addClass():添加class属性值 会自动添加空格
2. removeClass():删除class属性值
3. toggleClass():切换class属性
toggleClass("one"):
* 判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加
第二种
通过attr()设置样式style或修改Class的值
$("p").attr("style","color:green")
$("p").attr("class","pNewClass")
第三种
通过.CSS修改样式
$("#div1").css("backgroundColor","pink");
$("#div1").css({
color:"red",
fontSize:32px,
//也可以用"fontSize"、"font-size"
});
- HTML 事件函数
事件绑定方式一：
通过事件函数进行事件绑定
$("选择器").事件类型函数(函数)；
绑定所有p标签，对每个P标签调用$(this)，可以获取确切对象的内容等*(不需要循环)
事件绑定方式二：
bind绑定事件
bind（"事件类型","事件函数"）
同一种可以重复绑定
事件绑定方式三：
on绑定事件
on("事件类型","事件函数"）
同一种可以重复绑定,用法和bind完全一样
事件绑定方式四：
toggle绑定事件
* jq对象.toggle(fn1,fn2...)
* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
* 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
解除事件绑定
jq对象.unbind（事件类型）--解除全部该类型事件绑定
jq对象.unbind(事件类型，事件函数) --解除具体事件绑定
jq对象.off（事件类型）--解除全部该类型事件绑定
jq对象.off(事件类型，事件函数) --解除具体事件绑定
- JavaScript 特效和动画
1. 三种方式显示和隐藏元素
1. 默认显示和隐藏方式
1. show([speed,[easing],[fn]])
1. 参数：
1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
* swing：动画执行时效果是 先慢，中间快，最后又慢
* linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。（回调函数）
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])
3. 淡入淡出显示和隐藏方式
1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])
- HTML DOM 遍历和修改
JQuery的for循环遍历
<!-- 遍历部分的html文件 -->
<body>
<ul>
<li name="aa">1</li>
<li name="bb">2</li>
<li name="cc">3</li>
<li name="dd">4</li>
<li name="ee">5</li>
</ul>
</body>
1、使用for循环+eq()进行遍历
//第一种方式
$(function(){
var arr = $("ul li");
for(i = 0;i<arr.length;i++){
console.log(arr.eq(i).text());
}
})
2、使用$().each()遍历
//第二种方式
$(function(){
$("ul li").each(function(index,element){
//第一种写法，使用this
console.log($(this).text());
//第二种写法，使用index和element
console.log(element,index);
console.log(element.getAttribute("name"));
//index:下标
//element：对应的的元素 <li name="aa">1</li>
//用到了input集合的索引,有用到了input集合的dom对象,
//可以通过该对象,拿到其对应的属性如：name，value等；
})
})
3、使用$.each()遍历
//第三种方式
//与第二种相同，只是把数组写到了each（）中
$(function(){
$.each($("ul li"),function(index,element){
//第一种写法，使用this
console.log($(this).text());
//第二种写法，使用index和element
console.log(element,index);
console.log(element.getAttribute("name"));
})
})
4、使用for..of遍历
//语法格式是：for(元素对象 of 容器对象)
$(function(){
for (li of $("ul li")) {
console.log(li);
//返回对象<li name="aa">1</li>
}
})
浙公网安备 33010602011771号