冯佳丽_20210119冯佳丽

知识点总结

1、常见的事件

在这里插入图片描述

    <body onload="ready()">
        <input type="button" value="点我呀" onclick="testClick()"/><br />
        <img src="img/2.jpg" width="350px" ondblclick="changeImage(this)">
        <br>
        <input type="text" onfocus="clearText(this)" onblur="setData(this)" value="请输入用户名..." />
        <hr /> 
        省份: 
        <select onchange="changeTest(this)"> 
            <option value="bj">北京</option> 
            <option value="sh">上海</option> 
            <option value="sc">四川</option> 
            <option value="sx">陕西</option> 
        </select> 
        <br /> 
        <!-- 如果该表单需要根据触发函数的返回值决定是否可以提交,那么必须在触发方法之前加 上return关键字--> 
        <form action="success.html" onsubmit=" return submitTest()"> 
            用户名:<input type="text" name="userName" /> 
            <input type="submit" value="提交" /> 
        </form>
        
        <script type="text/javascript">
            // 点击事件
            function testClick(){
                alert("点击了");
            }
            // 双击事件
            function changeImage(imgObj){
                imgObj.src = "img/1.jpg";
            }
            // 获取焦点
            function clearText(inputObj) { 
                inputObj.value = ""; 
            }
            //失去焦点 
            function setData(inputObj) { 
                inputObj.value = "请输入用户名..."; 
            }
            //下拉框内容发生变化的时候会触发 
            function changeTest(selectObj) { 
                alert("当前改变后内容是:" + selectObj.value); 
            }
            //表单提交的时候触发的方法
            function submitTest() { 
                //如果表单提交的时候触发的方法返回的是false,那么该表单不允许提交,返 回true才允许提交。 
                alert("表单马上要提交了.."); 
            }
            //加载事件 
            // function ready() { 
            //  alert("页面的元素已经被加载完毕了.."); 
            // }
        </script>
    </body>

2、jQuery概述

jQuery是一个JavaScript框架,目的:简化JS开发。

本质上是一个外部的js文件,在该文件中封装了很多js代码,实现了很多功能。

轻量级:1)学习难易程度、2)该框架对项目的影响程度

框架:是完成某种功能的半成品软件

3、js与jQuery

js jQuery
相互转化 js --> jq $(js对象) 或 jQuery(js对象) jq --> js jq对象[索引] 或 jq对象.get(索引)注意:jq对象本质上是js数组
页面加载事件 \((function(){})或者\)(document).ready(function(){}) window.onload=function(){}
事件绑定 jq对象.click(function(){}) 回调函数 js对象.onclick=function(){}
css样式设置 jq对象.css('样式名','样式值')或者 jq对象.addClass() js对象.style.样式名=样式值

4、jQuery选择器

和js的选择器用法基本相同

        //部分操作案例
        <div class="big_box">
            <div id="samll_box">
                <p>123</p>
                <p>456</p>
                <a href="#">789</a>
            </div>
            
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
            <h5>五级标题</h5>
            <h6>六级标题</h6>
            
            
        </div>
        <!-- 导入jquery -->
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                // 选择.big_box选择器的所有兄弟元素
                var a=$(".big_box ").siblings();
                console.log(a)
                // 选择的元素中的第一个元素
                var b=$(".big_box :first");
                console.log(b)
                // 得选择的元素中的最后一个元素
                var c=$("#samll_box :last");
                console.log(c)
                // 不包括指定内容的元素
                // 不包含p元素标签选择器
                var d=$("#samll_box :not(p)");
                console.log(d)
                // 偶数选择器
                var e=$("#samll_box :even");
                console.log(e)
                //  奇数选择器
                var f=$("#samll_box :odd");
                console.log(f)
                // 等于索引选择器
                var g=$("#samll_box :eq(2)");
                console.log(g)
                // 大于索引选择器
                var h=$("#samll_box :gt(0)");
                console.log(h)
                // 小于索引选择器
                var l=$("#samll_box :lt(1)");
                console.log(l)
                //获得标题(h1~h6)元素 
                var ff=$(":header");
                console.log(ff)
            })
            </script>

心得体会

1、jQuery和js的用法差不多,js学好,感觉jQuery就很简单了。

2、不熟练,发愁,代码不敏感,不熟悉,写个功能基本的东西都要百度半天,基础的东西陌生了。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1