码迷,mamicode.com
首页 > Web开发 > 详细

前端之jQuery

时间:2018-09-07 22:05:00      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:选择器   效果   包装   name   nts   菜单   支持   元素选择器   元素   

一. jQuery介绍

  1. jQuery是一个轻量级的,兼容多种浏览器的JavaScript库.

  2. jQuery可以更方便的处理HTML Document,Events,实现动画效果,更方便的进行Ajax交互,能够极大的简化JavaScript编程.

  3. 具有丰富的DOM选择器,jQuery的选择器使用非常方便,jQuery用几行代码就可以实现JS多行代码要实现的功能.

  4. 链式表达式,jQuery的链式操作可以把多个操作写在一行,更加简洁.

  5. 事件,样式,动画支持.jQuery还简化了JS操作css代码,并且代码段的可读性也比JS要强.

  6. Ajax操作支持.jQuery简化了Ajax操作,后端只需返回一个json格式的字符串就能完成与前端的通信.

  7. 跨浏览器兼容.jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋.

  8. 插件扩展开发.jQuery有着丰富的第三方的插件,例如: 树形菜单,日期控件,图片切换插件,弹出窗口等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用.

二. jQuery对象

  jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.

  如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法.

三. 查找标签

  1. 选择器

    ①. id选择器

      $( "#id" )

    ②. 标签选择器

      $( "标签名" )

    ③. class选择器

      $( ".classname" )

    ④. 配合使用

      $( "div.c1" )  //找到有c1样式类的div标签

    ⑤. 所有元素选择器

      $( "*" )

    ⑥. 组合选择器

      $( "#id, .classname, 标签名" )

    ⑦. 层级选择器

      $( "x y" )  //x标签下的所有y标签

      $( "x > y" )  //x标签的所有次一级y标签

      $( "x + y" )  //找到所有紧挨在x标签后面的y标签(只能找一个)

      $( "x ~ y" )  //x标签之后所有的同级兄弟y标签

    ⑧. 基本筛选器  (简写)

      $( ":first" )  筛选页面内第一个父标签

      $( ":last" )  筛选页面内最后一个标签

      $( ":eq(index)" )  索引为index的那个元素(元素从上至下按索引排序)

      $( ":even" )  匹配所有索引值为偶数的元素,从0开始计算

      $( ":odd" )  匹配所有索引值为奇数的元素,从0开始计算

      $( ":gt(index)" )  匹配所有索引值大于index索引的元素

      $( ":lt(index)" )  匹配所有索引值小于index索引的元素

      $( "div:not()" )  选择满足div的标签但不包括含有not后()内的条件的标签

      $( "div:has()" )  选择所有后代中含有has后()内条件的的div标签

前端之jQuery

标签:选择器   效果   包装   name   nts   菜单   支持   元素选择器   元素   

原文地址:https://www.cnblogs.com/dong-/p/9607259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!