• JQuery 基本知识,选择器,事件,DOM操作


    一、基本知识

    Jquery是什么?
      它就是一套JS方法包,jQuery是一个快速,小巧,功能丰富的JavaScript库。它使得HTML文档遍历和操作,事件处理,动画和Ajax更容易使用易于使用的API,可以工作在众多的浏览器。结合多功能性和可扩展性,jQuery已经改变了数百万人编写JavaScript的方式。
    二、选择器

    基本选择器:

      基本:

        ID选择器:$("#ID")

        Class选择器:$(".Class")  

        标签选择器:$("标签名")

      组合:

        并列:用逗号隔开 $("#ID1","#ID2","#ID3","#ID4",...)

        后代:用空格隔开 $(".Class Div")

    过滤选择器:

      基本过滤:

        首尾:  首个:$(".Class:first")   尾个:$(".Class:last")

        等于:  任意个:$(".Class:eq(索引号)") 或者 $(".Class").eq(索引号)   建议使用第二个,例如循环时取索引号方便

        不等于:大于:$(".Class:gt(索引号)")     小于$(".Class:lt(索引号)")    排除:$(".Class:not(.Class:eq(索引号))")

        奇偶:索引号为奇数:$(".Class:odd")      索引号为偶数:$(".Class:even") 

      属性过滤:

        属性名过滤:$(".Class[属性名]")

        属性的名值对过滤:$(".Class[属性名=值]")    $(".Class[属性名!=值]")

      内容过滤:

        文字:$(".Class:contains("字符串")")

        子元素:$(".Class:has(选择器)")

      未来元素:

        $("选择器").live("事件名",function () { });

    三、事件

      常规事件

        把JS事件中的on去掉即可;

        复合事件:

          $("选择器").hover(function(){},function(){});      相当于把mouseover()mouseout()合二为一

          $("选择器").toggle(function(){},function(){},function(){},...);    点击事件循环执行

      事件冒泡

        阻止事件冒泡:在事件结束前加上 return false;   例如:

     $("#id").click(function () {
            alert("1");
            return false;
        });

     四:DOM操作

      操作属性

        获取属性  var s=$("选择器").attr("属性名");

        设置属性  $("选择器").attr("属性名","属性值");

        删除属性  $("选择器").removeAttr("属性名");

      操作样式

        操作内联样式     获取样式  var s=$("选择器").css("样式名");      设置样式  $("选择器").css("样式名","值");

        操作样式表的class   添加class   $("选择器").addClass("class名");

                  移除class   $("选择器").removeClass("class名");

                                         添加移除交替class   $("选择器").toggleClass("class名")

      操作内容
        表单元素     取值: var s=$("选择器").val();     赋值:  $("选择器").val("值"); 

        非表单元素   取值: var s=$("选择器").html();  var s=$("选择器").text();     赋值:  $("选择器").html("内容");   $("选择器").text("内容"); 

      操作相关元素

        查找    父级:$("选择器").parent();    $("选择器").parents("选择器");  

            子级:$("选择器").children("选择器");    $("选择器").find("选择器");  

            平级:前面的:$("选择器").prve();    $("选择器").prveAll("选择器");  

               后面的:$("选择器").next();    $("选择器").nextAll("选择器"); 

      操作

        新建: var s=$("Html字符串");

          添加: 内部添加:$("选择器").append($("Html字符串"));

            平级之前添加:$("选择器").before($("Html字符串"));

            平级之后添加:$("选择器").after($("Html字符串"));

        移除:清空内部所有元素: $("选择器").empty();    移除元素本身包含内部的元素: $("选择器").remove();

        复制:var s=$("选择器").clone();

    五、动画

  • 相关阅读:
    laravel 使用DB 鏈接leftJoin查詢
    checkbox复选框,如何让其勾选时触发一个事件,取消勾选时不触发
    js获取上传图片大小,判断上传图片类型,获取图片真实宽度和高度
    如何查看crontab的日志记录
    linux应用之gcc环境的安装
    laravel 获取上一条insert语句产生的id
    laravel多条件查询(and,or嵌套查询)
    laravel ORM 模型关联 with () 用法
    js实现表单提交 onsubmit
    如何利用jquery来给input添加或删除disabled属性
  • 原文地址:https://www.cnblogs.com/maxin991025-/p/6385322.html
Copyright © 2020-2023  润新知