黑马程序员技术交流社区

标题: 【石家庄校区】JavaWeb前端基础 [打印本页]

---

作者: 周杰11    时间: 2018-1-23 15:24
标题: 【石家庄校区】JavaWeb前端基础

JavaWeb前端基础

Html:用来制作静态页面
        文件是（.htm 或者.html）
Document的常用操作
*document.getElementById();通过Id获得元素
*document.getElementsByName():通过name属性获得元素
*document.getELementsByIdTagName():通过标签名获得元素
创建元素：
        document.createElement();
        document.createTextNode(): 创建文本
添加节点：
element.appendChild():在最后添加一个节点
element.insertBefore():

JQ：
        js对象转为jQ对象：$(js对象名);
        JQ对象转为JS对象: $d[0]
                                          $d.get(0)
<!--使用之前一定要记得导包-->
                                                
什么JQ？
        是JS框架，对js进行了封装
        *js的常用框架：
                JQuery，ExtJS，DWR...
        JQ的使用：
                传统页面加载只能有一次onload        
                $相当于jq对象：$(function(){
                        alert("jq");
                });
        jQ加载页面币JS效率高，jq是等页面的DOM树加载完后进行执行
                ，js是要等页面加载完成后才进行执行
               
        jq写入方法：html("内容");        
               
js对象和jq对象？
                var $d=$("#d");
jq的效果操作：
        show():
                jq对象的.show();
                jq对象.show("");//slow,mormal,fast;
                jq对象.show(毫秒值)
                jq对象.show("",function(){
               
                });
               
        slideDown():
        slideIn();
        fadeIn():---谈入
        fadeOut():---谈出
        animate():自定义动画
        toggle()；单击切换函数
层级选择器：
        后代选择器：(body div)所有的都能找到
                                (选择器1+选择器2)找到下一个
        子元素选择器：使用">"
        基本过滤：
                使用 “:”
                odd奇数
                even偶数
                first第一个
                last最后
<h2>JQuery的选择器</h2>
                <!--
                【基本选择器】(*****)
                        id选择器
                                * 用法:$(“#id”)
                        类选择器
                                * 用法:$(“.类名”)
                        元素选择器
                                * 用法:$(“元素名称”)
                        通配符选择器
                                * 用法:$(“*”)
                        并列选择器
                                * 用法:$(“选择器,选择器,选择器”)
                【层级选择器】：
                *        后代选择器：使用空格        
                                * 所有后代包含孙子及以下的元素
                *        子元素选择器：使用>        
                                * 第一层的元素（儿子）
                        下一个元素:使用+               
                                * 下一个同辈元素
                        兄弟元素:使用~               
                                * 后面所有的同辈元素
                【***基本过滤选择器】
                        :first
                        :last
                        :not(selector)
                *        :even - 偶数
                *        :odd - 奇数
                *        :eq(index)
                        :gt(index)
                        :lt(index)
                        :header
                        :animated
                        :focus
                【内容选择器】
                        :contains(text)
                        :empty
                        :has(selector)
                        :parent
                【属性选择器】        
                        [attribute]
                        [attribute=value]
                        [attribute!=value]
                        [attribute^=value]
                        [attribute$=value]
                        [attribute*=value]
                        [attrSel1][attrSel2][attrSelN]
                【表单选择器】
                        :input
                        :text
                        :password
                        :radio
                        :checkbox
                        :submit
                        :image
                        :reset
                        :button
                        :file
                        :hidden
                【表单属性选择器】
                        :enabled
                        :disabled
                        :checked
                        :selected
jQ里多个样式可以用空格隔开
triggle是或执行函数内容,并且执行浏览器的默认的函数操作


总结:
作用: trigger和triggerHandler两个方法的本质作用,调用其他元素中已经绑定的事件
trigger --- >不仅执行函数体,而且触发浏览器默认的这个函数的操作
triggerHandler---->只执行函数体,并不会触发浏览器默认的操作

使用bootStream时套引入如下：
      <!--添加一个meta的标签-->
                <meta name="viewport" content="width=device-width, initial-scale=1"> //不要忘记还有他
                <!--引入两个必要的css-->
                <link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
                <link rel="stylesheet" href="../css/bootstrap.min.css" />
                <!--引入两个js-->
                <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>//jq一定要放在前面
                     <script type="text/javascript" src="../js/bootstrap.min.js" ></script>
还要导入bootstream的js，css,fonts

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2