2019年9月2日 日报

JQuery

html连接jq必须加一行这个代码:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 
陌生:
parents('元素名')
    上一级的什么元素
 $("#div1").fadeIn();
    渐变,淡入
 $("#div1").fadeToggle();
    渐变 淡入,淡出
 $("#div2").fadeTo("slow",0.4);
    设置透明
 $('#div').slideUp("slow");
 $('#div').slideDown("slow");
  设置滑动消失
 $("#div1").fadeToggle();
  设置显示消失

jq选择器基础选择器:
    #id:根据给定的id匹配一个元素fadein
    .classname:根据给定的类名匹配一个元素
    classname:根于给定的元素名匹配元素
    *:匹配所有元素
    select1,select2:将每一个匹配到的元素合并后一起返回
jq层次选择器:
    ancestor descendant:选取ancestor元素里的所有descendant元素(无论是孙子级别还是儿子级别都会被匹配)
    paren>child:获取parent元素下的child元素(只去匹配儿子级别的元素)
    prev+next:选取紧接在prev元素后的next元素(找出prev下的第一个next元素)
    prev~next:选取紧接在prev元素后的所有next元素
jq常用的基本过滤选择器
    :first:选取第一个元素
    :last:选取最后的元素
    :not(selector):去除所有与给定选择其匹配的元素
        例:$(input:not(.myclass))剔除class名为myclass的input元素
    :even:选取索引值为偶数的所有元素,从0开始
    :odd:选取奇数的元素
    :eq(index):匹配一个给定索引值元素,从0开始
        例:$("div:eq(1)")
    :gt(index):匹配大于索引值的元素,从0开始
        例:$("div:gt(1)");
    :header:选择h1,h2,h3一类的标签
    :animated:匹配正执行动画效果的元素
jq常用的基本过滤选择器
    :contains(text):匹配包含给定文本的元素
        $("标签:contains('查找的文本')");
    :empty:匹配所有不包含子元素或者文本的空元素(查找空元素)
    :has(selector):匹配含有选择器所匹配元素的元素
    :parent:选取含有子元素或者文本的元素
jq常用的可见性过滤选择器
    :hidden:选取所有不可见的元素
    :visible:选取所有可见的元素
jq事件
    在jq中使用的是$(document).read()方法——$()方法
    在jq中使用的是window.onload方法
    区别:
        执行时机不同:
            window.onload方法是在网页中的元素(包括元素的所有关联文件)完全加载到浏览器后执行,即javascript此时才可以访问网页中的任何元素
            $(document).ready()方法在DOM完全就绪时就可以被调用,无需等待元素的相关联文件下载完毕,可以大大提高程序的响应速度。 
        使用次数不同:
            window.onload事件一次只能保存一个函数的引用
            $(document).ready()方法每次调用都会在现有的行为上追加新的行为
        执行的次数不同:
            window.onload只能绑定一个函数,只是最后绑定的函数被引用
            $(document).ready()可以绑定多个函数,并且每个绑定的函数都会被引用
        可以两种方式结合使用:
            将window绑定在$(document).ready()上
            $(window).load(function(){});
            这样可以让$(document).ready()方式得出DOM树后再得到所有属性或元素后再输出
jq的事件绑定
    bind()方法对元素进行事件绑定
        语法:bind (type,[data],fn)
        简洁语法:.type(fn)
            type是事件类型,如点击事件等
            data主要是传递给处理函数,很少能用到
            fn出发了这个事件交给哪个函数来处理
        例:("div").bind("click",function(){}); 就是绑定一个事件
        例:("div").bind("mouseover mouseout",function(){});同时绑定多个事件
                      mouseover鼠标移入事件  mouseout鼠标移出事件
    jq常用的事件类型
        click单击事件  dbclick双击事件,blur失去交流事件,focus获得焦点事件 等等  看截图
    合成事件:
        hover(enter,leave)方法
            用于模拟光标悬停事件,当鼠标移动到元素上的时候会调用enter函数,当鼠标离开的时候会出发leave函数
        toggle(fn1,fn2,fn3)方法
            用于绑定两个或多个事件处理器函数,以响应被选元素的六论的click事件
            toggle()方法是点击第一次的时候显示第一个函数,点击第二次的时候显示第二个函数,轮流执行
            toggle()方法可以是无参的,也可以是有参的,无参的就是点击以下出现再点击以下就消失的效果
jq事件对象:
        语法:
            $("元素或变量").bind("事件",function(){})
防止事件冒泡:冒泡事件就是逐级向上级执行,多个匿名函数顺序执行也是冒泡,是用这种方法可以停止冒泡
        使用:event.stopPropagation()方式来停止事件冒泡
阻止默认行为   例如使用表单中的submit提交按钮,并在script代码中书写一个函数并赋予单击指令,这个时候就会执行函数中的代码,并不会提交
        使用:event.preventDefault()方法来组织元素的默认行为  
同时对事件对象停止冒泡和默认行为
        使用:return false
							        进度:60%