传智黑马前端 html+css+js+jquery复习 day05

网站分享:
    http://www.runoob.com/

回顾:
html:展示
    文件 标签:
        <html>
            <head>
                <title></title>
                <meta>
                <link>   //导入外部css
                <style></style>  //直接写css
            </head>
            <body></body>
        </html>

排版标签:
        p 段落
        hr 分割线
        br 换行
    
    字体标签:
        <font></font>
        h1~h6 标题标签   (独自占一行)
        
        b strong
        i
    图片标签:
        <img src="图片的路径" alt="替代文字" width="" height=""/>
    超链接标签
        <a href="跳转的路径" target="在那里打开">xx</a>
    列表标签
        <ul></ul>
        <ol></ol>
        子标签
            <li></li>
    表格★
        <table border="1">
            <tr>
                <td></td>
            </tr>
        </table>
        
        td的重要属性:
            colspan:列合并
            rowspan:行合并
    
    表单标签:★
        表单作用:收集用户信息
        form:
            常见的属性:
                action:设置提交路径
                method:提交方式
                    get和post    GET比POST更不安全

,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
            常见的子标签:
                input
                select
                textarea
        
        input标签:
            属性:
                type取值:(10)
                    text:文本框
                    password:密码
                    radio:单选框
                    checkbox:多选框
                    file:文件框
                    
                    submit:提交
                    reset:重置
                    button:普通按钮
                    
                    hidden:隐藏域
                    image:图片提交 
                name属性:
                    1.提交到服务器
                    2.将单选框或者复选框设置为一组
        
        select:下拉选
            格式:
                <select name="">
                    <option>-请选择-</option>
                    <option value="">展示的信息</option>
                </select>
        
        textarea:文本域
            格式:
                <textarea rows="" cols="">默认值</textarea>
                
        默认值:
            text password:设置value属性
            radio checkbox:设置 checked="checked"属性
            select:在option上设置 selected="selected"属性
        value可以设置按钮的展示文字
    
    框架:
        frameset:框架集
            常用属性:
                cols:
                rows:
            常用子标签:
                frame
        frame:
            常用属性:
                src:展示的页面 
                name:给当前的frame起个名字 方便a标签使用  target="name"
    
    块标签:div+css布局
        div   独自占一行,宽为浏览器宽
        span  行内标签
//
css:★
    层叠样式表:渲染
    格式:
        选择器:{属性:值;属性1:值1}
    html和css的整合
        方式1:内敛样式表 通过标签的style属性
            <xxx style="..."/>
        方式2:内部样式表 通过head的style子标签
            <style>....</style>
        方式3:外部样式表 通过link标签导入 
            <link...>       <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
    
    选择器:
        id选择器 #id值
        class选择器 .class值
        元素选择器 标签名
        
        属性选择器    标签名[属性="值"]
        后代选择器  
            选择器 后代选择器
        锚伪类

    字体 文本 背景 列表(list-style-type:none) 浮动:float 
    清除浮动(分类) clear
    显示(分类)    display: none  block inline
    框模型:内边距 边框 外边距

js:javascript 脚本 直接解释就可以
    js和html整合:
        方式1:在html页面中
            <script></script>
        方式2:外部的js文件
            <script src=""></script>
    js组成部分:
        ECMAScript:语法
        BOM:浏览器对象模型
        DOM:文档对象模型
    
基础语法:
    var 变量名=值;
数据类型:
    原始类型
        Undefined Null String Number Boolean
        通过typeof判断属于那种类型
    引用类型
        Number Boolean
        ★String
            属性:length
            方法:
                substring
        ★Array
            属性:length
            方法:
                join(分隔符):打印数组
        Math
        Date
        RegExp
            直接量语法: 
                /正则表达式/
            方法:
                test()
        全局
            decodeURI
            encodeURI
            
            eval()

函数:
    function 函数名(参数列表){
        函数体
    }
    
    匿名函数:
        function(){....}

事件:
    常见事件:
        焦点:
            onfocus
            onblur
        表单:
            onsubmit
            onchange
        页面元素加载
            onload
        单击
            onclick
绑定事件:
    方式1:通过标签的事件属性
        <xxx onxxx="函数(参数)"/> 参数若是:this 将当前的dom对象传递给函数
    方式2:派发事件
        dom对象.onxxx=function(){...}
///
bom
    window:窗口
        常用属性:
            window.location
            //
        常用方法:
            消息框
                alert() confirm() prompt()
            定时器
                setInterval()
                setTimeout()
            打开关闭 open close
    location:定位
        location.href;获取当前的url
        location.href="..";设置url 相当于a标签
    history:历史
        go()
/
dom
    节点(Node)
        元素节点
        属性节点
        文本节点
        
        文档节点
    获取其他节点
        document.getElementById("id值"):一个元素
        document.getElementsByTagName("标签名"):多个
        document.getElementsByClassName("class值")多个
        document.getElementsByName("name值")多个
    操作属性
        dom对象.属性:
            例如  
                dom对象.value;
                dom对象.value="";
                dom对象.style.css属性="值";
    操作标签体:
        dom对象.innerHTML;获取
        dom对象.innerHTML="";设置
/
jquery:  百度 360 微软  >50% 都在用jquery
    js类库:对原生js常见的方法和对象进行封装,方便使用
html和jquery整合:
        通过script标签src属性
获取jquery对象:
    $("选择器") jQuery("选择器")
dom对象和jquery对象转换
    dom>>>jquery   $(dom对象)
    jquery>>>dom 
        方式1:
            jquery对象[index]
        方式2:
            jquery对象.get(index)
页面载入:
    $(document).ready(function(){....})
    $(function(){ ...})
事件和js中的事件一样:把on去掉即可
    $("选择器").xxx(function(){...})
选择器:
    $("#id") $(".class") $("元素") $("[属性]") $("[属性='值']")
    a b: 后代  a>b:孩子   a+b:大弟弟  a~b:所有弟弟
    :first :last :odd :even  :eq(index)..
    :has('选择器')   //含有指定后

代的选择器(父元素)
    :hidden  :visible
    :input
    :checked :selected
属性和css操作:
    attr|prop
        prop("属性"):获取
        prop("属性","值"):设置一个
        prop({
            "":"",
            "":""
        }):设置多个
        
    removeAttr|removeProp(属性)
    
    addClass("class名称")
    removeClass("class名称")
    
    css: 针对style属性
        css("属性"):
        css("属性","值"):
        css({
            "":"",
            "":""
        }):设置多个
    
    height() width()
        
对value属性 标签体的操作
    xxx():获取
    xxx("笑嘻嘻的说法"):设置
        
        val():
        html():
        text():

对文档操作:
    内部插入
        append
        prepend
         
    外部插入
        after
        before
        
    删除
        empty()清空
        remove()删除
//
效果:
    hide() show() toggle()
滑入滑出
    slideDown() slideUp()
淡入淡出
    fadeIn() fadeOut()

遍历
    方式1:
        jquery对象.each(function(){});
    方式2:
        $.each(jquery对象,function(){});
//
案例1-表单校验
需求:
    通过validate插件来校验表单
技术分析:
    jqery validate
validate使用步骤:
    validate是别人封装好的第三方工具
    1.导入jquery.js
    2.导入validate.js
    3.在页面加载成功之后 对表单进行校验  $("选择器").validate()
    4.在validate中编写校验规则
        $("选择器").validate({
            rules:{},
            messages:{}
        });
//    
    rules格式:
        格式1:
            字段的name属性:"校验器"
        格式2:                
            字段的name属性:{校验器:值,校验器:值}
    例如:
        username:"required",
        password:{
            required:true,
            digits:true
        },
        repassword:{
            equalTo:"[name='password']"
        },
        zuixiaozhi:{
            min:5
        },
        shuzhiqujian:{
            range:[5,10]
        }
///    
    messages的格式:
        格式1:
            字段的name属性:"提示信息"
        格式2:
            字段的name属性:{校验器:"提示信息",校验器:提示信息"}
    例如:
        username:"用户名不能为空",
        password:{
            required:"密码不能为空",
            digits:"密码只能是数字"
        },
        repassword:{
            equalTo:"两次输入的内容不一致"
        },
        zuixiaozhi:{
            min:"最小值应该大于{0}"
        },
        shuzhiqujian:{
            range:"输入的范围在{0}~{1}之间"
        }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值