【JavaScript】JQuery与你相见恨晚

简介

    jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,核心理念是write less,do more(写得更少,做得更多)。
特点:
    1、动态特效
    2、ajax同步异步
    3、通过插件扩展
    4、方便的工具
    5、渐进增强
    6、链式调用
    7、多浏览器支持

基本用法


  一、语法

    $(selector).action()
    $为定义JQuery,选择符(selector)“查询”和“查找”HTML元素,action()执行对元素的操作

  二、选择器

    1.$("p.name")选取所有class="name"的<p>元素
    2.$("p#card)选取所有id="card"的<p>元素
    3.$("[href]")选取所有带href属性的元素
    4.$("[href]="#")选取所有href值等于"#"的元素,当然还可以是不等于
    5.$("[href$='.js']")选取所有href值以".js"结尾的元素

  三、事件

    $("button").click(funciton(){....})当按钮单击事件被触发调用一个函数

  四、效果

    1.hide() 和 show(),代表显示和隐藏
    2.fadeIn()淡出隐藏元素
      fadeOut()淡出可见元素
      fadeToggle()在前两个淡出方法之间进行切换
      fadeTo()允许渐变为给定的不透明
    3.slideDown()向下滑动元素
      slideUp()向上滑动元素
      slideToggle()上下之间相互切换的滑动
    4.$(selector).animate({params},speed,callback); 
      params必须是css属性
      speed参数规定效果的长
      callback动画完成后执行的函数名
    5.$(selector).stop(stopAll,goToEnd);
      stopAll规定是否清楚动画队列、goToEnd规定是否完成当前动画
    6.$(selector).hide(speed,callback)  当动画100%完成之后,调用callback
    7.$("#p1").css("color","red").slideUp(200).slideDown(200);
      以上表示可以将动作连起来

  五、HTML

    1.text()设置或返回文本的内容
      html()设置或返回所有元素的内容
      val()设置或返回表单字段的值
    2.append()在被选元素结尾插入内容
      prepend()在被选元素开头插入内容
      after()在被选元素之后插入内容
      before()在被选元素之前插入内容
    3.remove()删除被选元素(以及子元素)
      empty()从被选元素中删除子元素
    4.addClass()向被选元素添加一个或多个类
      removeClass()从被选元素删除一个或多个类
      toggleClass()对被选元素进行添加删除的切换、css()设置或返回样式属性
    5.width()宽度
      height()高度
      innerWidth()宽度(包括内边框)
      outerheight()高度(包括内外边框)

  六、遍历

    1.parent()返回直接父元素
      parents()返回所有祖先元素
      parentsUntil()返回给定元素之间的所有祖先元素
    2.children()返回被选元素的所有直接子元素
      find()返回被选元素所有后代元素
    3.siblings()返回被选元素的所有同胞元素、next()、nextAll()、nextUntil()
       prev()返回被选元素的所有前面元素、prevAll()、preUntil()
    4.first()首字母、last()尾字母
      eq()返回被选元素带有指定索引号的元素
      filter()给定一个标准,不匹配的将被删除

  七、AJAX

    1.$(selector).load(URL,data,callback);
      URL规定加载的URL
      data规定与请求一同发发送的字符串键值对集合
      callback是load方法执行完成之后的函数名
    2.GET从指定的资源请求数据
      POST向指定的资源提交要处理的数据

   八、杂项

     当$与别的地方冲突的时候,调用noConflict()会释放$符号在JQuery中的控制

感受

    学习完JQuery安排的视频以及例子的任务之后,总感觉没有一个宏观的把控,于是就在网上搜了对应的资料,然后进行了这样的总结,总算是对于JQuery有了一个大概的了解了,其实它真的很强大,很方便,但是对于IT行业的我们还应该在会用JQuery封装的方法基础上,深入理解封装的这些方法的内部结构,加油了!

评论 36
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

创业之路&下一个五年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值