zoukankan      html  css  js  c++  java
  • jq相关操作

    1事件:

    <div class="ele">123</div>
    box.onclick = function(ev){
        ev:系统传入的事件对象
        ele.innerText;
    }
    
    鼠标事件=>clientX,clientY
    键盘事件=>ctrlkey,keyCode
    
    鼠标事件:
    onmouse enter|move|down|up|leave
    onclick|dblclick  oncontextmenu
    
    键盘事件:onkeydown|up
        
    定时器:
    setInterval|setTimeout 
    setInterval(fn,1000)
    clearInterval|clearTimeout
    

    jq

    jQuery是一个高效,精简并且功能丰富的javascript工具库
    $是jQuery的别名
    <script src = "jquery-3.3.1.js"></script>
    <script>
    //注意,一定在引入jQuery之后,再使用jQuery提供各种操作
    
    选择器
    ①获取满足条件的所有页面元素jq对象
    $("css3选择器语法");
    ②拿到指定索引的页面元素jq对象
    $("css3选择器语法").eq(index);
    ③拿到指定索引的页面元素js对象(jq数组放的都是js对象)
    $("css3选择器语法")[index];
    $("css3选择器语法").get(index);
    ④js对象转jq对象
    $(js对象)
    

    文档加载

    问题:
    在标签建立前的jq语法中使用该标签
    解决方法:
    让jq语法在页面加载后再执行
    
    文档加载方法
    1.js
    window.onload = function(){
    }
    
    2.jq
    $(document).ready(function(){});
    简写:$(function(){});
    
     onload结构和资源都加载完毕
    		只能绑定一个事件方法
    ready 结构加载完毕
    		可以绑定多个事件方法
        
     页面加载的方法
    1.可以保证页面结构一定加载完毕
    2.可以保证数据的局部化(不会被外界直接读写)
    
    注:导入jq一定要在使用jq之前
     <script src="js/jquery-3.3.1.js">
        </script>
        <script>
            $(function(){
                $(".top").css("background-color","cyan");}
            );
        </script>
    

    jq操作元素对象

    <script>
    //    <!--更改文本-->
    //    链式操作:几乎每一个方法都具有返回值(元素对象)
    //    $(".top li:first-child").text("哈哈").html("<strong>鲨鱼</strong>");
    
        <!--更改样式-->
    //    $(".top").css("width",function () {
    //        width要加双引号,this是js对象,$(this)将js对象转换为jq对象
    //        可以使用height(),括号不能丢,语句后的分号不能丢
    //       return $(this).height()*2;
    //    });
    //    $(".top").height("400px").css("background-color","cyan");
    //    $(".top li").css({
    //    属性后的值要加双引号
    //        color:"yellow",
    //        fontSize:"14px",
    //        float:"left"
    //    });
    //    console.log($(".top"));
    
    //    console.log($)
    //    console.log(jQuery)
    </script>
    
    
    //    修改类名
    //        $(".top").addClass("bot");
    //        console.log($(".top").addClass().removeClass("bot"))
    //    增加全局属性
    //    $("img").attr("src","http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg");
    //    删除全局属性
    //    $("img").removeAttr("src");
    //    获取全局属性
    //    console.log($("img").attr("xzh"));
    

    jq获取盒子信息

    显示信息

    #盒子信息:
    #宽高(content)|内边距(padding)|边框(border)|外边距(margin)
    
           .top {
                margin: 5px;
                padding: 10px;
                border: 20px solid green;
                200px;
                height: 300px;
                background-color: orange;
                list-style: none;
            }
    
    //    var res = $(".top").css("padding");
    //    console.log(res);//10px 带单位
    //   var res = $(".top").width();
    //    console.log(res);//width就是content的宽  200不带单位
    //    var res = $(".top").innerWidth(); // 220 innerWidth w要大写,等于width加上padding宽
    //    console.log(res);
    //    var res = $(".top").outerWidth();//260 outerWidth 等于width 加上 padding 加上 border宽
    //    console.log(res);
    //    var res = $(".top").outerWidth(true);//270 加上true的话,还要再加上margin宽,
    //    console.log(res);
    

    位置信息

        .nav{
                 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top:20px;
                left:20px;
                margin: 10px 10px;
            }
    
    //相对窗口偏移:算margin产生的距离
       $(function () {
            var res = $(".nav").offset();//{top: 30, left: 30}//相对于窗口的偏移,要算margin的值
            console.log(res);
        });
     
    //绝对定位偏移(top,left):不算margin产生的距离
          $(function () {
            var res = $(".nav").position();//{top: 20, left: 20}不算margin的值
            console.log(res);
        })
    position().top
    offset().top
    

    jq操作元素对象

        <!--更改文本-->
    //    链式操作:几乎每一个方法都具有返回值(元素对象)
    //    $(".top li:first-child").text("哈哈").html("<strong>鲨鱼</strong>");
    
        <!--更改样式-->
    //    $(".top").css("width",function () {
    //        width要加双引号,this是js对象,$(this)将js对象转换为jq对象
    //        可以使用height(),括号不能丢,语句后的分号不能丢
    //       return $(this).height()*2;
    //    });
    //    $(".top").height("400px").css("background-color","cyan");
    //    $(".top li").css({
    //    属性后的值要加双引号
    //        color:"yellow",
    //        fontSize:"14px",
    //        float:"left"
    //    });
    
    

    事件

    $(".box").on("click",function(){
        alert($(this).text())
    })
    
    var d = "AAA"
    #四个参数,第一个事件,第二个指派,第三个参数,第四个功能,
    $(".box").on("click","span",{aaa:d},function(ev)){
        console.log(ev);
        console.log(ev.data.aaa);#参数保存在data属性中
        console.log(ev.clientX);
    }
    
    
    !DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <div class="box">
            <span>"哈哈"</span>
            <a >"呵呵"</a>
        </div>
    </body>
    <script>
        var b = "aaa";
        $(".box").on("click","a",{a:b},function (ev) {
            console.log(ev.clientX);
            console.log(ev.data.a);
        })
    </script>
    </html>
    
    

    取消默认事件;

        <style>
            div{
                 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $("div").on("contextmenu",function (ev) {
            ev.preventDefault()//第二种方法
            var bg = $(this).css("background-color");
            alert(bg);
    //        return false;第一种方法
    
        })
    

    父子都有点击方法时,取消父级方法

    $(".sup,.sub").on("click",function (ev) {
        ev.stopPropagation();//阻止事件的传播,冒泡
        var cname = this.className;
        alert(cname);
    })
  • 相关阅读:
    c编写程序完成m名旅客和n辆汽车的同步程序代写
    [原]web服务器:SOAP,WSDL,UDDI
    用多进程同步方法演示“桔子-苹果”问题
    实验教学管理系统 c语言程序代写源码下载
    模拟游客一天的生活与旅游java程序代写源码
    Java作业代写
    快餐店运行模拟C++程序源码代写
    求可能组合VB源码代写
    深入源码分析Java线程池的实现原理
    ThreadLocal原理详解
  • 原文地址:https://www.cnblogs.com/robert-zhou/p/10321216.html
Copyright © 2011-2022 走看看