【jQuery】JQuery基础

JQuery概述

    1.JQuery简介
    • JQuery是一个JavaScript库。极大地简化了JavaScript编程。
    • JQuery拥有强大的选择器支持,支持CSS1-CSS3几乎所有的选择器,以及JQ独创的高级而复杂的选择器。
    • 解决了不同浏览器间的兼容问题
    • 代码简洁,功能强大,易于理解......
    2.JQuery的引入

    注:jquery1.x版本支持IE 6/7/8;jquery-2.x以上版本不再支持IE 6/7/8

    目前最新版本为jquery-3.1.1(最新),大家可以随时关注官网最新版本的动态,对于初学者来说,看教程的时候,你看以前版本的教程书籍依然有用,很对新版本增加的功能对于初学者未必用得上,另你掌握了一个版本的用法之后,即使版本后续有更新,只要关注更新部分即可,不会对学习造成太大的困扰.......

    JQuery各版本下载地址

    • 官网下载到本地引入
    • 百度压缩版本引用地址1:
      http://libs.baidu.com/jquery/2.0.0/jquery.min.js
    • 百度压缩版本引用地址2:
      https://code.jquery.com/jquery-3.1.1.min.js
      .....
    3.JQuery的语法

    基础语法是:$(selector).action()

    • 美元符号定义JQuery
      • $就是jquery对象
      • $是JQuery中选取元素的符号
      • $是JQuery中功能函数的前缀(功能函数后边再讲)
    • 选择符(selector)"查询"和"查找"HTML元素
    • JQuery的action()执行对元素的操作
    4.document.ready和window.onload的区别

      Jquery中$(document).ready()的作用类似于传统javaScript中的window.onload方法,不过与window.onload方法还是有区别的。

      document).ready(function(){})这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数
      Window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

    • Window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
    • Window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行

JQuery选择器

    原生javaScript中,只能使用getELementById()、getElementByName、getElementByTagName()等几种有限的方法来获取元素,JQuery为我们提供了大量的选择器,极大地方便了我们快速选择元素来进行各种操作。

    JQuery的选择器完全是继承了css选择器的风格,大家在学习JQuery选择器的时候,一定要先联系CSS选择器进行对比记忆。

    虽然选择器很多,但是并不要求大家一下子全记住。可以先记住常用的几种,其他的等到需要的时候查阅下资料。因为这些选择器,我们是必须通过真正的开发实践才能够真正的熟练掌握

    1. 基本选择器
    • id选择器:$("#id名")
    • 元素选择器:$("元素名")
    • 类选择器:$(".类名")
    • 群组选择器:$("选择器1,选择器2,.......,选择器n")
    • *选择器:$("*")选择所有元素
    2.层级选择器

    层次选择器,就是能过元素之间的层次关系来获取元素.常见的层次关系包括:父子、后代、兄弟、相邻。

    • $("M N")后代选择器,选择M元素内部后代N元素
    • $("M>N")子代选择器,选择M元素内部子代N元素
    • $("M~N")兄弟选择器,选择M元素后所有的同级N元素
    • $("M+N")相邻选择器,选择M元素相邻的下一个元素
    3. 属性选择器

    HTML元素通常包含很多属性,JQuery的属性选择器就是把各种属性作为选择器。

    • $("selector[attr]")选择包含给定属性的元素
    • $("selector[attr='value']")选择给定的属性是某个特定值的元素
    • $("selector[attr!='value']")选择所有含有指定的属性,但属性不等于特定值的元素
    • $("selector[attr*='value']")选择给定的属性是以包含某些值的元素
    • $("selector[attr^='value']")选择给定的属性是以某些值开始的元素(比较少用)
    4. 伪类选择器

    伪类选择器也称作过滤选择器。

    JQuery伪类选择器都是以英文冒号“:”开头,和css中的伪类选择器用法相似,使得我们可以快速地选择我们想要获取的元素。

    • 简单伪类选择器元素
      • :not(selector)选择除了某个选择器之外的所有元素
      • :first或first()选择某元素的第一个元素(非子元素)
      • :last或last()选择某元素的最后一个元素(非子元素)
      • :odd选择某元素的索引值为奇数的元素
      • :even选择某元素的索引值为偶数的元素
      • :eq(index)选择给定索引值的元素,索引值index是一个整数,从0开始
      • :lt(index)选择所有小于索引值的元素,索引值index是一个整数,从0开始
      • :header选择h1~h6的标题元素:focus选取当前具有焦点的元素
      • :root选择页面的根元素
      • :animated选择所有正在执行动画效果的元素
    • 子元素伪类选择器
      • :first-child选择父元素的第1个子元素
      • :last-child选择父元素的最后1个子元素
      • :nth-child(n)选择父元素下的第n个元素或奇偶元素,n的值为"整数|odd|vevn
      • :only-child选择父元素中唯一的子元素(该父元素只有一个子元素)
      • :first-of-type选择同元素类型的第1个同级兄弟元素
      • :last-of-type选择同元素类型的最后1个同级兄弟元素
      • :nth-of-type选择同元素类型的第n个同级兄弟元素,n的值可以是"整数|odd|even"
      • :onlt-of-type匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素)
    • 可见性伪类选择器
      • :hidden选取所有不可见元素

        “:hidden”选择器选择的不仅包括样式为display:none所有元素,而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。

      • :visible选取所有可见元素
    • 内容伪类选择器

      内容伪类选择器,就是根据元素中的文字内容或所包含的子元素特征来选择元素,其文字内容可以模糊或绝对匹配进行元素定位。

      • :contains(text)选择包含给定文本内容的元素
      • :has(selector)选择含有选择器所匹配元素的元素
      • :empty选择所有不包含子元素或者不包含文本的元素
      • :parent选择含有子元素或者文本的元素(跟:empty相反)
    • 表单伪类选择器
      • : Input选择所有input元素
      • :button选择所有type="button"的input元素
      • :submit选择所有type="submit"的input元素
      • :reset选择所有type="reset"的input元素
      • :text选择所有单选文本框
      • :textarea选择所有多行文本框
      • :password选择所有密码文本框
      • :radio选择所有单选按钮
      • :checkbox选择所有复选框
      • :image选择所有图像域
      • :hidden选择所有隐藏域
      • :file选择所有文件域
    • 表单属性伪类选择器
      • :enabled选择所有可用input元素
      • :disabled所有禁用的input元素
      • :selected选择所有被选中的option元素
      • :checked选择所被选中的表单元素,一般用于radio和checkbox
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注