zoukankan      html  css  js  c++  java
  • JQuery

    JavaScript库,是一个封装好的集合(方法和函数)。简单说就是一个js文件,里面是堆原生js代码进行了封装。

    Jquery是一个JS库,就是为了快速方便操作DOM,里面基本都是函数(方法)。

    JQuery优点:

    • 轻量级,核心文件才几十kb
    • 跨浏览器兼容,基本兼容了现在主流的浏览器
    • 链式编程,隐式迭代
    • 对事件,样式,动画支持,大大简化了DOM操作
    • 支持插件拓展开发。有这个丰富的第三方插件如:轮播图,日期控件
    • 免费开源
    基本用法:

    1.基本入口函数
    语法一:
    $(document).ready(fuctioin(){
    需要执行的代码
    })
    语法二:
    $(){
    需要执行的代码
    }
    上述两种方法会等页面DOM结构渲染完毕,不必等所有外部资源加载完成,再去执行其中的js代码。
    相当于原生js中的DOMContentLoaded
    不同于原生js中的load事件是等页面文档,外部的js文件,css文件,图片加载完毕才执行内部代码。

    2.jQuery的顶级对象$
    $是jQuery的别称,在代码中可使用jQuery代替$,一般都直接使用$。
    $也是jQery中的顶级对象,将我们的元素包装成jQuery对象。

    3.jQuery对象和DOM对象
    通过原生JS获取的是DOM对象 //eg:var mydiv = document.querySelector('div')
    jQuery方法获取的是jQuery对象 //eg:var mydiv = $('div')
    jQuery对象本质:利用$对DOM对象包装后产生的对象(伪数组形式存储)。

    jQuery对象只能使用jQuery方法。DOM对象只能使用原生JS的属性和方法。

    4.jQuery对象和DOM对象转换
    jQuery对象只是把JS中一些常用的属性和方法进行了封装。当需要使用未被封装的方法的时候,需要进行转换。
    DOM对象转换为jQuery对象:$(DOM对象)
    jQuery对象转为DOM对象:$('')[索引号] 或 $('').get(索引号)


    jQuery常用API

    1.jQuery选择器
    原生JS获取元素方式多,杂,而且兼容情况不一致。因此jQuery做了封装,使获取元素统一标准。
    语法:
    $(”选择器“) //里面选择器直接写CSS选择器即可,但要加引号。

    jQuery基本选择器

    id选择器 $(#id号) 描述
    全选选择器 $('*')
    类选择器 $('.类名')
    标签选择器 $('标签名')
    并集选择器 $('div,li,p') 获取多个元素
    交集选择器 $('li.current')

    JQuery层级选择器

    子代选择器 $('ul>li') >号,获取亲儿子层级的元素,并不会获取孙子层级元素
    后代选择器 $('ul li')

    jQuery筛选选择器

    语法 用法 描述
    :first $('li:first') 获取第一个li元素
    :last $('li:last') 获取最后一个li元素
    :eq(index) $('li:eq(2)') 获取到的li元素中,选择索引号为2的元素,index从0开始
    :odd $('li:odd') 获取到的li元素中,选择索引号为奇数的元素
    :even $('li:even') 获取到的li元素中,选择索引号为偶数的元素

    jQuery筛选方法(使用时需用小括号)

    parent() $("li").parent(); 返回最近以及的父级元素
    children(selector) $('ul').children('li') 相当于$('ul>li'),查找儿子元素
    find(selector) $('ul').find('li') 相当于$('ul li'),后代选择器
    siblings(selector) $('.first').siblings('li') 查找兄弟节点,不包括本身
    nextAll([expr]) $('.first').nextAll() 查找当前元素之后的同辈元素
    prevtAll([expr]) $('.last').prevtAll() 查找当前元素之前的同辈元素
    hasClass(class) $('div').hasClass('pro') 查找当前元素是否含有某个特定的类,如有则返回true
    eq(index) 相当于$('li':eq(2))

    2.jQuery样式操作
    语法:
    $('选择器').css('属性','值')
    jQuery对象是以伪数组形式存储,操作样式时,会自动遍历内部DOM元素,该过程叫做隐式迭代。因此当获取到的元素有多个时,无需像原生JS那样用for循环进行遍历。

    3.jQuery效果
    4.jQuery属性操作
    5.jQuery文本属性值
    6.jQuery元素操作
    7.jQuery元素,位置操作

  • 相关阅读:
    Android 判断现在系统存储器是“手机存储”还是“SD存储”
    Android中Is library配置的作用
    [已解决]报错: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/Users/mac/Ana
    [未解决]报错:ssh_exchange_identification: read: Connection reset by peer
    Python快速设置Excel表格边框
    Python字典排序
    Scrapy框架: Request回调函数
    Scrapy框架: 异常错误处理
    Scrapy框架: 通用爬虫之SitemapSpider
    Scrapy框架: 通用爬虫之CSVFeedSpider
  • 原文地址:https://www.cnblogs.com/tingshu/p/14942435.html
Copyright © 2011-2022 走看看