• jQuery快速入门


    ---恢复内容开始---

    jQuery 快速入门

    jQuery介绍

    1、jQuery是一个轻量级的、兼容多浏览器的JavaScript 库。

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

    它的宗旨就是:write less. do more.

    jQuery 的优势

    1、一款轻量级的JS框架, jQuery 核心js文件才几十kb,不会影响页面加载速度。

    2、丰富的DOM 选择器用起来很方便,比如要找到某个DOM对象的相邻元素, JS可能要写好几行代码, 而 jQuery一行代码就搞定了, 再比如要将一个表格的隔行变色,  jQuery也是一行代码搞定。

    3、链式表达式: jQuery的链式操作可以把多个操作卸载一行代码里,更加简洁。

    4、事件,样式, 动画支持。 jQuery还简化了js 操作css的代码,并且代码的可读性也比Js要强。、

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

    6、跨浏览器兼容。Jquery基本兼容了现在主流的浏览器, 不用在为浏览器的兼容问题而伤脑筋了。

    7、插件扩展开发。jquery有着丰富的第三方插件, 例如树形菜单, 日期控件, 图片切换插件, 弹出窗口等等基本前端页面上的组件都有对应的插件。

    并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件, 简单实用。

    Jquery内容

    1、选择器,

    2、筛选器

    3、样式操作

    4、文本操作

    5、属性操作

    6、文档处理

    7、事件

    8、动画效果

    9、插件

    10、each,data,Ajax

    jquery版本

    • 1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
    • 2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
    • 3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

    维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。

     jquery对象

    jquery对象就是通过jquery包装DOM 对象后产生的对象。jquery对象是jquery独有的。如果一个对象是jquery对象,那么它就可以使用jquery里的方法:

    例如$("#i1").html()。

    $("#i1").html()的意思是:获取id值为i1的元素html 代码。其中html()是jquery里的方法。

    相当于 document.getElenmentById("i1").innerHTML;

    虽然jquery对象是包装DOM 对象后产生的,但是jquery对象 无法使用DOM 对象的任何方法, 同理DOM 对象也不能使用

    Jquery里的方法。

    一个约定。我们在声明一个jquery 对象变量的时候 在变量名前加上$:

    VAR $variable = Jquery 对象
    var variable =DOM对象
    $variable//Jquery对象转化成DOM 对象

    拿上面那个例子来举例,jquery对象和DOM 对象的使用:

    $("#i1").html();//jquery对象可以使用jquery的方法
    $("#i1")[0].innerHTML;//DOM对象使用的DOM 的方法

    JQUERY基础语法

    $(selector).action()

    查找标签

    选择器

    id选择器  用(“#”)

    $("#id")

    标签选择器  (“标签名”)

    $("tagName")

    class选择器:  (".类名”)

    $(".classname")

    配合使用:

    $("div.c1") //找到又c1 class类的div 标签

    所有元素选择器:(“*”)

    $("*")

    组合选择器:中间用“,”隔开。

    $("#id, .classname, tagname")

    层级选择器: x,y可以为任意选择器

    $("X Y"),// x 的所有后代y(子子孙孙)
    
    $("X>Y");//X 的所有儿子y(只是儿子,没有孙子,子孙)
    
    $("x+y");// 找到所有的紧挨在x后面的y
    
    $("x~y");// x之后所有的兄弟y

    基本选择器:

    :first //第一个
    用法:  $("#ul>li:first")
    
    :last //最后一个
    用法:$("#ul>li:last")
    
    :eq(index)//索引等于index的那个元素
    用法:$("ul>li:eq(3)")
    
    
    :even//匹配所有索引值为偶数的元素 从0开始计算
    用法:$("ul>li:even")   // 找到ul 下 li 标签里索引值为偶数的元素
    
       
    :odd//匹配所有索引值为奇数的元素, 从0开始计数
    用法:$("ul>li:odd")   //找到ul下li标签里索引值为奇数的元素
    
    :gt(index)//匹配所有大于给定索引值的元素
    用法:$("ul>li:gt(3)")  //找到所有 ul 下li 标签里索引值大于3 的元素
    
    
    :lt(index)//匹配所有小于给定索引值的元素
    用法:$("ul>li:lt(3)")     //找到所有的ul下li标签里前3个元素
    
    :not(元素选择器)//移除所有满足not条件的标签
    用法:$("li:not(.cl)")   //找到所有不包含cl样式类的li标签
    
    
    :has(元素选择器)//选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
    用法:$("li:not(:has(a))")     //找到所有后代中不含a标签的li标签

    属性选择器:

    [attributeName]
    [attributeName=value] //属性等于
    [attribute!=value]//属性不等于

    例子:

    <input type = 'text'>
    <input type="password">
    <input type="checkbox">
    
    
    $("input [type='checkbox']");  //取到checkbox 类型的input 标签
    
    $("input[type !='text']") //取到类型不是text的input标签

    表单常用筛选:

    :text  #文本格式
    :password  密码
    :file  文件
    :radio  html中的单选按钮
    :checkbox   检查框 复选框
    
    
    :submit 提交
    :reset  重置 清零
    :button  按钮

    例子:

    $(":checkbox")//找到所有的checkbox

    表单对象属性:

    :enable  可用的
    
    :disabled  暂时禁用输入框
    
    :checked 选择器选取所有选中的复选框或单选按钮
    
    :selected  找到所有被选中的

    例子:

    1<form>
        <input name="email" disable="disabled"/>
        <input name="id"/>
    <form>
    
    
    $("input:enabled")  //找到可用的input标签
    
    
    
    2<select id="s1">
        <option value="beijing">北京市</option>
        <option value="shanghai">上海市</option>
        <option selected value="guangzhou">广州市</option>
        <option value="shenzhen">深圳市</option>
    </select>

    $(":selected") //找到所有被选中的option

    筛选器

    下一个元素:

    $("#id").next()   找出id里的下一个标签
    
    $("#id").nextAll()    找出id里后面的所有的标签
    
    $("#id").nextUntil("#i2")   找到id后面的标签知道i2 为止

    上一个元素:

    $("#id").prev()    找id上一个元素
    
    $("#id").prevAll()     找id上所有的元素
    
    $("#id").prevUntil("#i2")   找id上所有的元素 直到i2为止

    父亲元素:

    $("#id").parent()   找id的父元素
    
    
    $("#id").parents() 找当前元素的所有父辈元素
    
    
    $("#id").parensUntil()  找当前元素的所有的父辈元素直到遇到那个匹配的元素为止

    儿子和兄弟元素:

    $("#id").children() //儿子们
    
    
    $("#id").siblings()   //兄弟们

    查找元素:

    $("#id").find()//搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

    补充:

    .first() //获取匹配的第一个元素
    
    
    .last() // 获取匹配的最后一个元素
    
    .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
    
    
    .has() //保留包含特定后代的元素, 去掉那些不含有指定后代的元素。

    ---恢复内容结束---

  • 相关阅读:
    Docker-常用命令
    5分钟了解折半插入排序
    Spring框架之IOC原理
    使用JS实现简单喷泉效果
    坦克大战系列6-API常用函数说明1
    坦克大战系列6-API常用函数说明2
    为什么要使用-Docker
    SQL语言:存储过程
    使用原生JS重构简单的音乐播放器
    [区间DP]ZOJ3541 The Last Puzzle
  • 原文地址:https://www.cnblogs.com/lx3822/p/9134572.html
Copyright © 2020-2023  润新知