A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小石姐姐 于 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){
});


评分

参与人数 1黑马币 +5 收起 理由
韶华白首zy + 5 很给力!

查看全部评分

1 个回复

倒序浏览
非常666666666666
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马