• Jquery


    一、jq简介

    jq其实就是js的一个文件。

    二、jq书写步骤

    1、先引入jq文件(min的文件)

    <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script>

    2、换新的一行写js代码

    <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

    jquery书写的内容。。。。。。
    </script>

    3、按照jq的语法写代码

    三、入口函数的不同

    js的入口函数只能有一个,如果写了多个,它只执行最后一个。

    jq的入口函数可以有多个,可以顺序执行每一段

    注意:入口函数有一个就够了,不用写很多

    四、对象

    jquery对象   使用$('')从页面中得到的元素,就是jq对象

    DOM对象      使用document从页面中得到的元素,就是DOM对象

    区别:

    jq:苹果手机   ios系统 不能双卡双待 不能换电池

    DOM:安卓手机 安卓系统 可以双卡双待 可以换电池

    结论:DOM对象和jq对象的方法是不可混用的

    五、对象转换

    jq转DOM:[0]或者.get(0)

    DOM转jq:$(box)

    六、jq控制css

    单属性修改:.css('属性名','属性值');

    多属性修改:.css({'属性名1':'属性值1','属性名2':'属性值2',.......})

    单属性获取:.css('属性名');

    七、jq控制HTML标签属性

    语法同上:.attr()

    八、jq控制html内容

    设置:.html('设置的内容');

    获取:.html();

    九、jq的对角线动画

    .show(1000)   显示

    .hide(1000)     隐藏

    .toggle(1000)  切换

    注意:如果只写了以上这些方法,是不会有动画效果的,不需添加时间参数才会出现动画效果。

    十、jq滑动动画

    .slideUp()        滑动隐藏

    .slideDown      滑动显示

    .slideToggle()  滑动切换

    注意:这组动画,不加时间参数也可以有动画效果

    十一、jq基本选择器

    1、$('#id'):id选择器

    2、$('div'):标签选择器

    3、$('.myClass'):类选择器,返回所有class="myClass"的元素

    4、$('*'):返回所有元素,多用于结合上下文搜索

    5、$('div,span,p,myClass'):多条件选择器,返回所有查到的元素

    6、$('.ul01 .li02'):后代选择器

    7、$('.ul01 .li02>li'):表示子代选择器,只能选择第一级的后代

    8、$('.ul01 .li02+li'):表示选中指定标签后面紧挨着的一个同级标签

    9、$('.ul01 .li02~li'):表示选中指定标签后面的所有同级的某种标签

    十二、jq过滤选择器

    :first     选中第一个

    $('.ul01 li:first').css('background','pink')

    :last     选中最后一个 

    $('.ul01 li:last').css('background','pink')

    :not()    除了哪一个其他的。。。

    $('.ul01 li:not(.myClass01)').css('background','pink')

    :eq()     选中某一个

    $('.ul01 li:eq(0)').css('background','pink')

    :gt()      大于某一个

    $('.ul01 li:gt(2)').css('background','pink')

    :lt()        小于某一个

    $('.ul01 li:lt(2)').css('background','pink')

    十三、筛选选择器

    重点:所有的筛选选择器写在选择函数外

    三巨头:父、子、兄

    $('div').parent()    选中父级元素

    $('div').children()  选中子集元素

    $(this)                   代表当前对象(跟js里面的this一样)

    $(this).$siblings$()  最牛的筛选选择器 免除所有的排他工作,可以选出除了自己以外的所有同级元素。 

    $('div').find(p)   搜索所有div中的后代 p元素.

    十四、jq的动画排队机制

    在jq如果多次出发动画,那么这些动画就会排队等待执行,而这些效果,往往不是我们想要的,所以我们可以在动画的方法之前添加一个.stop()方法来解决此排队问题。

    十五、hover方法

    .hover(function(){

    //鼠标移入事件

    },function(){

    //鼠标移出事件

    })

    注意:如果只写了一个匿名函数,代表移入和移出执行的代码一样

    十六、索引值

    在jq中用选择器选出来元素都有一个index(),可以返回这个元素在父级元素中的索引值(自己家孩子排大小,跟隔壁家没关系)

    十七、jq控制class

    在jq中,使用attr()方法可以将控制calss,但是jq中专门准备了一系列方法空值class的值。

    1、添加类                         addClass('类名')

    2、删除类                         removeClass('类名')

    3、判断是否有某一个类    hasClass('类名')

    4、切换某一个类               toggleClass('类名')

    注意:这些类名不用再加     '.'

    十八、jq中的链式编程

    在jq中如果是针对“同一目标”进行的操作,都可以使用“.”语法来连续书写,这叫jq的链式编程。

  • 相关阅读:
    codeAnalyze_函数赋值给另一个函数的形参
    js_new关键字创建对象的五个步骤
    codeRecord_bind
    js_活动对象与变量对象的区别
    将linux的随机ip固定为设置的固定ip
    Springcloud总结
    Jackson的使用
    Lucene的初步了解和学习
    Shiro安全框架
    关于xpath中的tbody
  • 原文地址:https://www.cnblogs.com/xibuhaohao/p/10308996.html
Copyright © 2020-2023  润新知