• jquery_01笔记


    jquery和dom的区别:

    dom:

    window.onload()方法:

    1)必须等待网页中所有元素加载完毕后(包括图片)才能运行;

    2)只能编写一个,不能别写多个

    window.onload() = function(){

      alert("hello world");

    }

    window.onload() = function(){

      alert("hello world..................again");

    }

    运行结果为:hello world..................again;

    jquery:

    $(document).ready();

    1)页面中所有dom元素绘制完成就执行,可能dom元素相关的东西还没有加载;

    2)可以编写多个

    $(document).ready(function(){
      alert("jquery 模仿 window.onload() 方法.................");
    });

    $(document).ready(function(){
      alert("jquery 模仿 window.onload() 方法.................again");
    });

    运行结果为:jquery 模仿 window.onload() 方法................., jquery 模仿 window.onload() 方法.................again;

    3)有缩写形式

    $(function() {

    }

    jquery和dom的相互转换:

    //jquery转换dom

    var $obj_query = $(#id) //query 对象
    var obj_dom = $(#id)[0] //dom 对象
    var obj_dom = $(#id).get(0) //dom 对象

    //dom转换jquery

    var obj_dom = document.getElementByid("id") //dom 对象
    var $obj_query = $(obj_dom) //query 对象

    事件放置位置:

    如果是页面启动期间需要执行的动作,需要放在window.onload()方法里或者$(document).ready()方法里;

    例如:

    function div_onclick() {
      alert('div_onclick...............');
    }
    
    window.onload = function () {
      /**
    
      * click 方法,模拟一次点击事件
      * */
      //匿名方法,马上调用
      document.getElementById("div_first").click = function() {
           alert('hah..so easy!!!');
       }()
      //调用预定义的方法
    
      document.getElementById("div_first").click = div_onclick();
    }

    /**
     * 把事件放在里面是为了加载dom以后才有对象,否则为null
     */
    $(function() {
    //    alert('load over..............');
        //预定义的事件
        $('#div_second').click(function() {
            var dom = document.getElementById("div_second");
            var context = $(dom).html();
            alert(context)
        })
        $('#div_second').blur(function() {
            var dom = document.getElementById("div_second");
            var context = $(dom).html();
            alert(context)
        })
        
    
        //直接执行
        if($('#tt').length == 0){
            alert("没有id为tt的元素")
        }
        alert($('.div span').length);
        alert($('.div > span').length);
    })

    二.jquery选择器

    1)var obj_dom = document.getElementByid("id").style.color = 'red' //如果没有元素id = “id” 就会报错
       $("#id").css("color","red") //即使没有元素id也不会报错

    2)检查是否有某个元素
    //错误写法
    if($("#id")){
    alert("存在。。。")
    }
    //正确写法
    if($("#id").length > 0){
    alert("存在。。。")
    }
    //转换为dom对象
    if($("#id")[0]){
    alert("存在。。。")
    }

    3)选择器
    $("#id >div") 选取id为id的子类div
    $("#id +div") 选取id为id的下一个div (同辈元素)
    $(".one ~div") 选取class为one的后面所有div (同辈元素)
    $(".one").siblings("div") 选取class为one的前后所有div (同辈元素)

    $("div :first") 选取所有div的第一个元素
    $("div :last") 选取所有div的最后一个元素

    //...................太多了~用时再找

    想的都是好
  • 相关阅读:
    Go语言从入门到放弃(结构体常见的tag)
    Go语言从入门到放弃(设置 go get 为国内源)
    AndroidStuidio安装
    ADB常用命令
    win10安装Nodejs
    VsCode配置Go语言插件
    Visual Studio Code使用指南
    Go语言从入门到放弃(四)
    CentOs7.5安装Redis
    InnoDB INFORMATION_SCHEMA FULLTEXT Index Tables
  • 原文地址:https://www.cnblogs.com/freezone/p/5394546.html
Copyright © 2020-2023  润新知