黑马程序员技术交流社区
标题:
【石家庄校区】JavaScript&JQuery 学习笔记
[打印本页]
作者:
cyahua
时间:
2018-5-3 15:37
标题:
【石家庄校区】JavaScript&JQuery 学习笔记
本帖最后由 小石姐姐 于 2018-5-4 09:47 编辑
JavaScript&JQuery 学习笔记
JavaScript
基础语法
变量是弱类型的
与 Java 和 C 不同,ECMAScript 中的变量无特定的类型,定义变量时只用 var 运算符,可以将它初始化为任意值。
因此,可以随时改变变量所存数据的类型(尽量避免这样做)。
结尾的分号可有可无
全等运算符:===当两侧变量的值和类型都相等时才返回true
内置对象Date:
new Date().getTime():获取当前时间的毫秒值
变量类型
原始类型
undefined
String
number
boolean
null
引用类型
定义函数
function 函数名称(){}
JS的引入方式
通常有2种:
在<script>标签中直接写
用<script>标签中的src属性引入
JS正则校验
String中的match()
RegExp中的test()
JS的常用事件
常用事件:
onload:页面加载完成后触发
onsubmit:表单提交时触发
onfocus:获得焦点时触发
onblur:失去焦点时触发
onchange: 下拉列表改变时触发
onscoll:页面滚动时触发
键盘操作事件:
onclick:单击时触发
ondblclick:双击时触发
onkeydown:键盘按下时触发
onkyeup:键盘松开时触发
onkeypress:键盘按下并松开时触发
鼠标操作事件:
onmousemove:鼠标移动时触发
onmouseout:鼠标移开时触发
onmouseover:鼠标放上时触发
onmousedown:鼠标按下时触发
onmouseup:鼠标松开时触发
BOM:浏览器对象模型
window
setInterval();
setInterval("change()",5000);
setTimeout();
setTimeout("change()",5000);
clearInteval();
clearTimeout();
open();打开一个小窗口
confirm();弹出确认框
prompt();弹出可输入的对话框
alert();一般调试时使用
history
history.go(-1)或history.back()返回上一页
location
location.href="";可以用作页面的跳转
JS的输出
document.getElementById("id名").innerHTML="HTML的代码";
document.write("HTML的代码");
DOM对象
概述:
Document Object Model文档对象模型
document:整个html文档加载到内存中可以用document对象表示
element:就是html中的标签
attribute:标签上的属性
text;文本
获得元素:
document.getElementById();只能获得一个元素,当有有多个同id元素时,获取第一个
document.getElementsByName();
documentgetElementsByTagName();
创建元素:
document.createElement();创建元素
document.createTextNode();创建文本
添加节点:
element.appendChild();-- 在最后添加一个节点
element.insertBefore();-- 在某个元素之前插入
删除节点:
element.removeChild();
JQuery
window.onload 与 入口函数$(function(){})的区别
都是在页面加载完成后触发,$(function(){})比window.onload效率高
windows.onload只能触发1次,$(function(){})可以触发多次window.onload是等页面加载完成后执行;$(function(){})是等页面的DOM树绘制完成后执行)
核心函数
jQuery的方法只能由jQuery的对象调用
核心函数:$(),括号内可以写:
选择器
原生的js对象
数组
入口函数:
$(function(){
});
$(document).ready(function(){
});
效果
show():显示
hide():隐藏
slideDown():向下滑动
slideUp():向上滑动
fadeIn():淡入
fadeOut():淡出
animate():自定义动画
toggle():单击切换函数
选择器
基本选择器
id选择器:$("#id")
类选择器:$(".类名")
元素选择器:$("元素名")
通配符选择器:$("*")
并列选择器:$("选择器1,选择器2,选择器3...")
层级选择器
后代选择器:使用空格所有后代包含孙子及以下的元素
$("form input")
子元素选择器:使用>第一层的元素(儿子)
下一个元素:使用+下一个同辈元素
兄弟元素:使用~后面所有的同辈元素
基本过滤选择器
odd例如:$("tr:even")
even
eq
first
last
属性选择器
div[id]:有id属性的div选择器
div[title='aa']:title=aaa的属性的div元素
表单对象选择器
:checked
:selected
表单元素选择器
:text
:password
:radio
:checkbox
:file
筛选
parent()例如:$(this).parent()
child()
find()例如:$("form").find(":input")
is()例如:$(this).is("#id")
属性操作
prop()
$("#id").prop("src"):获取属性的值
$("#id").prop("src","xxxx"):改变元素的属性
$("#id").prop("src":"xxxx","name":"xxxx"):改变元素的多个属性
removeProp()
attr():不再维护
removeAttr():不再维护
文档处理
append()
append()可以作用于数组,将会为数组内的所有元素追加相同的内容
例如:$("p").append("<b>Hello</b>");,所有p标签后面都会追加helloworld
appendTo()
insetAfter()
insertBefore()
remove()
empty()
HTLM代码/text文本/val值
html()
$("#id").html():获取元素里面的html代码
$("#id").html("<span>da</span>"):用括号内的内容覆盖原内容,标签可以正确识别
text()
$("#id").text():获取元素里面的文本
$("#id").text("<span>da</span>"):用括号内的内容覆盖原内容,标签不能识别
val()
$("#id").val():获取元素的value属性值
$("#id").val("xx"):设置元素的value属性值
CSS操作(改变页面元素样式)
css():适用于样式代码比较少的情况
addClass():适用于样式事先定义好的情况
removeClass()
toggleClass():样式存在的话就删掉,不存在的话就添加上
事件处理
hover():鼠标悬停
注:如果是仅改变元素样式,则也可以使用CSS的伪类实现
on():在选择元素上绑定一个或多个事件
bind():为每个匹配元素的特定事件绑定事件处理函数。
delegate():指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
trigger():在每一个匹配的元素上触发某类事件,同时执行浏览器的默认动作
triggerHandler():这个特别的方法将会触发指定的事件类型上所有绑定的处理函数,但不会执行浏览器默认动作
遍历
$("img").each(function(i,n){
});
$.each(object,function(i,n){
});
作者:
韶华白首zy
时间:
2018-5-9 15:36
非常666666666666
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2