JavaScript & JQuery详解及举例

最新推荐文章于 2022-09-21 23:22:02 发布

烈，阳

最新推荐文章于 2022-09-21 23:22:02 发布

阅读量772

点赞数

文章标签： javascript js jquery

本文链接：https://blog.youkuaiyun.com/qq_43333989/article/details/108360826

版权

JavaScript对象的定义和使用

//1.使用原始的方式创建对象
        var obj = new Object();
        obj.name = "zhangsan"; //为obj对象添加属性
        obj.age = 20;
        obj.say = function(){ //添加功能（函数/方法）
            console.log(this.name,":",this.age);
        }
//2.使用工厂模式创建对象
        function createObject(name,age){
            var obj = new Object();
            obj.name = name; //为obj对象添加属性
            obj.age = age;
            obj.say = function(){ //添加功能（函数/方法）
                console.log(this.name,":",this.age);
            }
            return obj;
        }
//3.使用自定义构造函数创建对象
        function Stu(name,age){
            this.name = name;
            this.age = age;
            this.say = function(){
                console.log(this.name,":",this.age);
            }
        }
//4.直接创建自定义对象
        var ob = {name:"qq",age:26};
        console.log(ob.name);
        console.log(ob.age);
//判定对象是否是某一个类
       console.log(s1 instanceof Stu);

JavaScript内置对象-Array数组

<script>
        //内置对象--Array数组
        var a1 = new Array(); //定义一个空数组
        var a2 = new Array(10); //定义一个长度为10数组（值：undefined）
        var a3 = new Array(10,20,30); //定义一个指定数值的数组

        console.log(a1.length);
        console.log(a2.length);
        console.log(a3.length);

        var a4 = [10,20,30,40,50]; //快捷定义数组

        //数组的遍历
        for(var i=0; i<a4.length;i++){
            console.log(i,"=>",a4[i]);
        }

        for(var i=a4.length-1; i>=0;i--){
            console.log(i,"=>",a4[i]);
        }

        for(var i in a4){
            console.log(i,"=>",a4[i]);
        }

        a4.forEach(function(v){
            console.log(v);
        });
        
        //数组的方法：
        console.log(a4.toString());
        console.log(a4.join(":"));
        var aa = [1,2,3];
        console.log(aa.concat(4,5));

        var b = [10,50,30,20,70,40];
        console.log(b.join(":"));
        console.log(b.sort().join(":"));
        console.log(b.reverse().join(":"));

        var aa = new Array(10,20,30); 
        console.log(aa.join(":"));
        aa.push(50);
        aa.push(40);
        console.log(aa.join(":"));
        aa.pop();
        console.log(aa.join(":"));

        //清空
        console.log(b.join(":"));
        b.length = 3;
        console.log(b.join(":"));
        b = [];
        console.log(b.join(":"));
    </script>

JavaScript内置对象-基本包装类型

<script>
        //内置对象--基本保装类型
        var s1 = 'zhangsan';
        //字符串截取
        console.log(s1.substring(2,5))
        //等价于
        var s2 = new String("zhangsan");
        console.log(s2.substring(2,5));
        //保留两位
        var num = 20.5678;
        var num = new Number(20.5678);
        console.log(num.toFixed(2));
        
    </script>

Js事件

<button οnclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

Button 是事件源

Onclick 单击事件

“”里是事件处理程序

//改变 HTML 元素的样式

hid.style.backgroundColor = "#ddd";（将有-的CSS变为去掉-后面首字母大写）

Timing

Js事件绑定方式

主动绑定

被动绑定

Js获取事件源对象

//此种事件绑定方式，this就表示当前事件源对象

//console.log(this);

this.style.color = "red";

Js双击事件dblclick

contextmenu鼠标右击事件

mouse鼠标移入移出

JavaScript语言实例--键盘事件onkeydown

JavaScript语言实例--onload事件

<script>

        //当页面加载完成后才自动执行的程序

        window.onload = function(){

            var hid = document.getElementById("hid");

            hid.style.color="red";

        }

</script>

JQuery

Query 是一个 JavaScript 函数库。（使用比JavaScript更加简单）

jQuery 库包含以下特性：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

//当前页面加载完成后执行
        window.onload
//jQuery的标准入口
        $(document).ready(function(){
            //获取h1标签，并设置css样式
            $("h1").css("color","blue");
        });

JQuery选择器

JQuery基本选择器
//等价于上面语句,获取id值为hid元素节点，并设置css样式
            $("#hid").css("color","blue");
//获取网页中所有li元素节点，并设置css样式
            //$("li").css("color","red");
JQuery层级选择器
//获取ul中所有子元素节点li（包括后代节点），并设置样式
            //$("ul li").css("color","red"); 
            
            //获取ul中所有直接子元素节点li（包括后代节点），并设置样式
            //$("ul>li").css("color","red");

            //获取ul同级紧邻后面的第一个兄弟节点li，并设置样式
            //$("ul+li").css("color","red");

            //获取ul后面所有同级兄弟li元素节点，并设置样式
            $("ul~li").css("color","red");
JQuery基本筛选器
//获取所有li节点并设置样式
            //$("li").css("color","red");

            //获取第一个li节点并设置样式
            //$("li:first").css("color","red");

            //获取最后一个li节点并设置样式
            //$("li:last").css("color","red");

            //获取偶数索引号对应的所有li节点并设置样式
            //$("li:even").css("color","red");

            //获取奇数索引号对应的所有li节点并设置样式
            //$("li:odd").css("color","red");

            //获取class属性值为cc的所有li节点并设置样式
            //$("li.cc").css("color","red");

            //获取class属性值不为cc的所有li节点并设置样式
            //$("li:not(.cc)").css("color","red");

            //获取索引位置为2的li节点并设置样式
            //$("li:eq(2)").css("color","red");

            //获取前2个li节点并设置样式
            //$("li:lt(2)").css("color","red");

            //获取所有li节点并添加鼠标移入和移出事件
            $("li").mouseover(function(){
                $(this).animate({paddingLeft:"+=20"},800);
            }).mouseout(function(){
                $(this).animate({paddingLeft:"-=20"},500);
            });
JQuery内容选择器
//jquery入口
        $(function(){
            $("div:contains('John')").css("color","red");
        });
JQuery属性选择器
//获取所有含有value属性的input元素标签，并设置样式
            //$("input[value]").css("border","1px solid red");

            //获取name属性值为phone的input元素标签，并设置样式
            //$("input[name='phone']").css("border","1px solid red");

            //获取name属性值不为phone的input元素标签，并设置样式
            //$("input[name!='phone']").css("border","1px solid red");

            //获取name属性值是以a字符开头的所有input元素标签，并设置样式(正则)
            //$("input[name^='a']").css("border","1px solid red");

            //获取name属性值是以e字符结尾的所有input元素标签，并设置样式
            //$("input[name$='e']").css("border","1px solid red");

            //获取name属性值中含有m字符的所有input元素标签，并设置样式
            $("input[name*='m']").css("border","1px solid red");
JQuery属性选择器
//获取每组ul中的第一个li节点并添加样式
            //$("ul li:first-child").css("color","red");

            //获取每组ul中的最后一个li节点并添加样式
            //$("ul li:last-child").css("color","red");

            //获取每组ul中的第三个li节点并添加样式
            $("ul li:nth-child(3)").css("color","red");
JQuery表单选择器
function doFun(){
            //获取所有多选框中选择中的元素节点
            //var list = $("input[type='checkbox']:checked");
            var list = $(":checkbox:checked");
            alert(list.length);
            
            //获取li元素节点（条件是里面的多选框必须选中），并设置样式
            $("li:has(input:checked)").css("color","red");
        }

JQuery属性操作

var a = $("#aid");
            console.log(a.attr("href")); //获取
            console.log(a.prop("href")); //获取
            console.log(a.attr("title"));
            console.log(a.prop("title"));
            a.attr("href","http://news.baidu.com"); //添加或更改
            a.removeAttr("title"); //删除属性
            //a.attr("aa","bb"); //添加属性
            // a.prop("aa","bb"); //添加属性 prop方法不可以添加不能存在的属性
a.prop("title","百度新闻"); //只支持HTML DOM的属性操作

JQuery CSS类操作

<script>
        //jquery入口
        $(function(){
            //获取上面所有的li节点并添加点击事件
            $("ul.uu li").click(function(){
                //切换class类属性
                $(this).toggleClass("active");
                /*
                //判断当前节点li是否含有active class属性
                if($(this).hasClass('active')){
                    //删除class类属性
                    $(this).removeClass("active");
                }else{
                    //添加class类属性
                    $(this).addClass("active");
                }
                */
            });
        });
       
    </script>

JQuery CSS文本与值操作

//获取文本全部信息
console.log($("li.c1").html()); //类似于js中的innerHTML
//获取文本显示的信息
 console.log($("li.c2").text());
//设置信息
$("li.c3").html('<a href="http://www.qq.com">腾讯2</a>');
            $("li.c4").text('<a>新浪2</a>');

JQuery CSS样式操作

$(function(){
            //获取标题并设置css样式
            //$("#hid").css("color","red"); //单个属性设置
            $("#hid").css({"color":"green","background-color":"#ddd"});
            console.log($("#hid").css("color")); //获取css属性

            //获取div层的位置
            var offset = $("#inner").offset();
            console.log(offset.left,offset.top);

            //获取偏移位置
            var position = $("#inner").position();
            console.log(position.left,position.top);

            //获取尺寸
            console.log($("#inner").width(),$("#inner").height());
            $("#inner").width(300)
        });

JQuery 节点遍历

<script>
        //jquery入口
        $(function(){
           $("button").click(function(){
               //$("li").css("color","red");
               //获取li节点并遍历执行操作
               $("li").each(function(i){
                    //alert(i); //索引位置
                    $(this).html($(this).html()*2);
               });
           });

           /*
           //统一绑定点击事件
           $("li").click(function(){
               alert($(this).html());
           });
           */
        });
    </script>

JQuery 事件

<script>
        //jquery入口
        $(function(){
           //获取投票按钮并绑定一次性点击事件
           $("#bid").one("click",function(){
               alert("投票成功！");
               $(this).html("已投票");
           });
        });

        function dofun(){
            console.log("事件被点击！");
            $("#hid").css("color","red");
            //使用jquery程序激发一个事件
            $("#bid").trigger("click");
        }
</script>

JQuery 鼠标移入移出事件

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

当鼠标移到元素上或移出元素时触发执行的事件函数

$("#did").hover(function(){
                //鼠标移入事件处理
                console.log("鼠标移入111。。。。");
            },function(){
                //鼠标移出事件处理
                console.log("鼠标移出11。。。。");
            });

jQuery实例--阻止事件冒泡

当有div嵌套时，点击一个按钮会导致两个按钮都触发（所以需要阻止事件冒泡）

<h1 id="hid">jQuery实例--阻止事件冒泡</h1>
    <div id="outer">
       <div id="inner"></div>
    </div>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取div层并绑定点击事件
            $("#outer").click(function(){
                console.log("outer.....");
            });
            $("#inner").click(function(e){
                console.log("inner.....");
                //阻止事件冒泡（传播）
                e.stopPropagation();
            });
        });
       
    </script>