zoukankan      html  css  js  c++  java
  • js相关语法知识

    alert(); 页面弹窗

    <input plactholder="请输入密码"/>(隐藏字体效果)
    js对数据类型不敏感,与Java相似
    1.js变量定义符:var
    2.js数据类型:
    number string bollean undefind 引用数据类型
    typeod 查看数据类型
    3.js的函数有两种定义方式
    ①普通函数语法:
    function 函数名称(){
    js功能逻辑代码
    }
    ②匿名函数语法:优点:节省命名空间
    (var 函数名称 = )function(参数列表){
    js功能逻辑代码
    }
    4.js事件
    onclick 鼠标点击触发事件
    onmouseover 鼠标移入
    onmouseout 鼠标移出
    onload 某个页面或图像被完成加载
    onsubmit 当表单提交时触发该事件--注意事件源是表单form
    ondblclick 鼠标双击某个对象
    onblur 元素失去焦点
    onfocus 元素获得焦点
    onchange 用户改变域的内容
    onkeydown 某个键盘的键被按下
    onkeypress 某个键盘的键被按下或按住
    onkeyup 某个键盘的键被松开
    onmousedown 某个鼠标按键被按下
    onmouseup 某个鼠标按键被松开
    onmousemove 鼠标移动
    5.js的BOM对象
    ①screen对象,screen对象中存放着有关显示浏览器屏幕的信息
    ②window对象,window对象表示一个浏览器窗口或一个框架
    1)弹框的方法
    提示框 alert(提示信息)
    确认框 comfirm(确认信息) 返回值(true,false)
    输入框 prompt(输入信息)
    2)定时器
    执行多次的定时器:setInterval
    执行一次的定时器:setTimeout(函数,毫秒值)
    清除定时器:(执行多次清除)clearInterval(函数)
    清除定时器:(执行一次清除)clearTimeout(函数)
    3)全局方法(常用的几个)
    parseInt/parseFloat函数(字符格式转换)
    eval函数---特点:可以将字符串解析成js脚本
    window.onload 页面加载完毕事件
    document.getElementById() 获取页面中相应的文档id,方便修改信息
    ③navigator对象,包含的属性描述了正在使用的浏览器
    ④history对象,是用来保存浏览器历史纪录信息
    ⑤location对象,location对象是window对象的一部分,可通过window.location属性来访问。
    location.href="网址"; 相当于自动在浏览器中输入网址并跳转
    6.js的DOM的操作方法
    (1)标签元素的操作
    ①获得元素对象:
    根据id获得一个元素:getElementBy(id属性值)
    根据标签名称获得多个元素:getElementsByTagName(标签名称)
    根据class属性获得多个元素:getElementsByClassName(class的属性值)
    根据name属性获得多个元素:getElementsByName(name属性值)
    ②创建一个新元素 createElement()
    ③将元素放到某个父元素的内部appendChild()
    ④标签体的获取与设置:innerHTML
    (2)属性的操作
    获得属性的值:getAtrribute(name)
    设置添加属性的值:setAtrribute(name,value)
    删除某个属性:removeAtrribute(name)
    获得元素父节点: parentElement parentNode
    删除元素子节点: removeChile(元素)
    查看元素是否有子节点: hasChildNodes(元素)
    剪切节点替换: 父节点.replaceChild(要替换节点,被替换节点);
    添加子节点: appendChild(子节点);
    创建节点: createElement("标签名称")
    节点插入: 父节点.insertBefore(插入,被插入)
    父节点.insertAfter(插入,被插入)
    7.Date 函数
    8.Map 函数
    9.RegExp 正则表达式
    -------------------------------------------------
    jQuery
    10.jQuery对象与js对象之间的转换
    js对象转成jQuery对象,语法:$(js对象)
    jQuery对象转换成js对象,语法: jQuery对象[索引]或jQuery对象.get(索引)
    11.事件的写法不同,意义相同
    js的事件的写法:js对象.onclick = function(){}
    jQuery的事件的写法:jQuery对象.click(function(){})
    12.js的页面加载完毕与jQuery的页面加载完毕
    js的页面加载完毕:window.onload = function(){}
    jQuery的页面加载完毕:$(document).ready(function(){})
    两者区别:
    a)jQuery的页面加载完毕有简写形式:$(function(){})
    b)jQuery的页面加载完毕事件可以写多次,而js只能写一次,写多次也只会执行一次。
    13.基本选择器
    标签选择器(元素选择器): $("html标签名")
    id选择器:$("#id的属性值")
    类选择器:$(".class的属性值")
    14.层级选择器
    获得A元素内部的所有B元素:$("A B")
    获得A元素下面的所有的B子元素(孙子就不行):$("A>B")
    获得A元素同级下一个B元素:$("A+B")
    获得A元素同级所有后面B元素:$("A~B")
    15.属性选择器
    获得有属性名的元素:$("A[属性名]")
    获得属性名 等于 值 元素:$("A[属性名=值]")
    获得属性名 不等于 值 元素:$("A[属性名!=值]")
    获得属性名 以 值 开头 元素:$("A[属性名^=值]")
    获得属性名 以 值 结尾 元素:$("A[属性名$=值]")
    获得属性名 含有 值 元素 元素:$("A[属性名*=值]")
    复合属性选择器,多个属性同时过滤:$("A[属性名!=值][属性名!=值][属性名!=值]")
    16.基本过滤选择器
    获得选择的元素中的第一个元素: :first
    获得选择的元素中的最后一个元素: :last
    不包括指定内容的元素例如: :not(selecter)
    偶数,从0开始计数: :even
    奇数,从0开始计数: :odd
    指定第几个: :eq(index)
    大于n个: :gt(index)
    小于n个: :lt(index)
    获得标题(<h1>/<h2>...):header ---固定写法
    获得动画: :animated ---固定写法 正在执行的动画
    17.表单属性选择器
    可用: :enabled
    不可用: :disabled
    选中(单选radio,多选checkbox): :checked
    选择(下列列表<select>): :selected
    18.jQuery的DOM操作方法
    ①HTML代码/文本/值/属性:html()/test()/val()
    html text val 传递参数代表赋值 空参代表获取
    ②HTML属性操作:attr()/prop()
    attr()===setAtrribute和getAttribute
    attr(属性名称);---获取属性的值
    attr(属性名称,属性值);---设置属性的值

    ③HTML的class属性操作:addClass() removeClass()
    addClass(值)===attr("class",值)
    removeClass(class值)===removeAttr("class值")
    ④HTML的样式操作:css()
    css()===js对象.style.属性
    css(css属性名) 获取css属性名称对应值
    scc(css属性名,值) 设置css样式
    ⑤HTML的元素的创建:$("标签")
    $("<li></li>")===createElement("li")
    ⑥HTML的内部插入:append() prepend()
    append()===appendChild
    prepend() 加入所有子元素的最前面
    ⑦HTML元素的删除操作:remove()
    注意:jQuery中的大部分方法是集设置值与获取值为一体的
    定义变量时 使用var 则该变量属于函数私有
    不写var 则该变量属于全局的
    19.jQuery的效果
    ①元素的显示与隐藏
    show(speed,fn)显示
    参数 speed,显示速度,单位:毫秒。固定字符串:slow,normal,or fast
    参数 fn,显示成功之后回调函数。
    hide() 隐藏
    fadeIn() 显示。
    fadeOut() 隐藏。
    fadeToggle() 切换
    slideUp() 滑出
    slideOut() 滑走
    20.js页面的编码方法
    encodeURL() : 编码
    decodeURL() : 解码
    21.jquery中常用的事件
    jQuery的事件与js的事件的功能和意义一样,只是在使用语法上稍微有些差异
    blur([[data],fn]) 失去焦点事件
    change([[data],fn]) 域内容变化
    click([[data],fn]) 点击事件
    dblclick([[data],fn]) 双击事件
    focus([[data],fn]) 获得焦点事件
    keydown([[data],fn])
    keypress([[data],fn])
    keyup([[data],fn])
    mousedown([[data],fn])
    mouseleave([[data],fn])
    mousemove([[data],fn])
    mouseout([[data],fn])
    mouseover([[data],fn])
    scroll([[data],fn]) 滚动事件
    submit([[data],fn]) 提交事件
    22.事件的绑定:jQuery对象.bind(事件类型,相应函数);
    例如:
    绑定一个事件:
    $("btn").bind("click",function(){
    alert();
    });
    绑定多个事件:
    $("button").bind({
    click:function(){alert()},
    mouseover:function(){alert()},
    mouseout:function(){alert()}
    });
    事件的解绑:jQuery对象.unbind([事件类型]);
    例如:
    解绑所有事件:
    $("btn").unbind();
    解绑指定事件:
    $("button").unbind("click");
    23.事件转换
    $("#btn").hover(鼠标移入事件,鼠标移出事件);

  • 相关阅读:
    懒加载
    通过Xib自定义控件
    自定义控件
    swiper_banner图的封装
    uni-app中封装的search和scroll-view
    使用git从创建仓库或项目到push到远程并创建分支常用命令
    随手封装一个简单的日期组件(基于ele-ui的基础上)
    封装的一个时间条插件
    websocket的封装2
    websocket的封装1(做vue中的通信经常也是大概率用到的)
  • 原文地址:https://www.cnblogs.com/jake-jin/p/11435749.html
Copyright © 2011-2022 走看看