(一)认识JQuery 

     JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法

        JQuery的主旨:以更少的代码,实现更多的功能

(二)JQuery的优势

    1)可以像CSS一样访问和操作DOM

    2)修改CSS控制页面外观

    3)简化JS代码操作

    4)事件代理更加容易

    5)动画效果使用方便

    6) Ajax技术更加完美

    7)大量的基于Jquery的插件

    8)可以自定义扩展功能插件

(三)JQuery的语法

    格式:$(selector).action()
    美元符号$本身是Jquery对象的缩写
    选择符selector查询和查找HTML元素
    Action执行对元素的操作
    实例:$("p").hide():隐藏P元素

    这里提供一个JQuery的在线API:http://jquery.cuishifeng.cn/

(四)多库冲突

      解决多库冲突:jQuery.onConflict()方法放弃$符号,后面使用JQuery对象的时候就不能在使用$符号,而要使用JQuery

(五)原生JS对象和JQuery对象之间的转换

    JS对象--》JQuery对象:

        var p=document.getElementById('p');

        $(p);//转换成JQuery对象了

    JQuery对象--》JS对象:

        $(p).get(0)或者$(p)[0]//这样就得到JS原生对象了

(六)DOM操作

  1)设置元素以及内容:
    方法名                          描述
    html()                     获取元素中的HTML内容
    html(value)                  设置元素中HTML内容
    text()                      获取元素中文本内容
    text(value)                   设置元素中文本内容
    val()                      获取表单元素中的文本内容
    val(value)                   获取表单元素中的文本内容
   2)操作元素属性 //说明:这是对标签元素属性的操作,不是CSS样式表中的属性
    attr(key)                    获取元素key属性的属性值
    attr(key,value)                设置元素key属性的属性值
    attr({key1:value1,key2:value2})      设置元素多个key属性的属性值,方法的参数就是一个Object对象
    attr(key,function(index,value){})     设置元素key通过fn来设置

  3)操作CSS样式

    方法名                       描述
  css({name1:value1,name2:value2})       设置元素多个CSS样式
  addClass(class)                   给每个元素添加一个CSS类
  addClass(class1 class2 class3)         给元素增加多个CSS类
  remove(class)                  删除元素的一个CSS类
  removeClass(class1 class2 class3)       删除元素的多个CSS类
  toggleClass(class)                来回切换默认样式和指定样式

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法的更多相关文章

  1. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  2. JavaScript语法高亮库highlight.js使用

    highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...

  3. js原生ajax与jquery的ajax的用法区别

    什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...

  4. (function($, window, document) {}) jQuery 调用解决与其他javascript库冲突的写法

    将函数包在红色字体内部,可以解决$符号与其他插件的冲突. <script type="text/javascript"> (function($, window, do ...

  5. jQuery使用(三):DOM操作之val()方法操作表单元素value值

    操作表单元素属性value的值 <form action="./" method='GET'> <h3 >选择你喜欢的明星</h3> <s ...

  6. jQuery 第四章 实例方法 DOM操作之data方法

    jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有 ...

  7. 解决jquery与zepto等其它库冲突兼容的问题

    解决jquery与zepto等其它库冲突兼容的问题;(function ($) {    }) (jQuery); ;(function ($) {    }) (Zepto); 在Bootstrap ...

  8. jQuery -- 光阴似箭(一):初见 jQuery -- 基本用法,语法,选择器

    jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...

  9. jQuery实例化的优势,为什么要有实例化,到底实例化后在解决什么问题?

    jQuery实例化对象的方法相比于普通方法 优势: 1.不需要出现大量的new关键字. 2.可实现链式写法. 3.书写更方便 实例化的原因: 1.实例化有利于管理程序中不同的DOM选择和处理(不同的选 ...

随机推荐

  1. Wannafly交流赛1(施工中)

    A.有理数 签到题:直接用floor函数就行了,详细看代码 #define debug #include<stdio.h> #include<math.h> #include& ...

  2. Alpha冲刺No.10

    一.站立式会议 我们的阿尔法冲刺也基本宣告血崩,虽然很多功能已经实现,但是并没有串联在一起,好在这周不需要上课,我们也能好好睡一觉 实现手机的定位系统 细化界面设计 解决数据库和软件交互的一些问题 二 ...

  3. 学号:201621123032 《Java程序设计》第1周学习总结

    1:本周学习总结 JDK,JRE,JVM三者的含义和关系.JDK是java开发工具包,包含了java的运行环境,java工具和类文库.例如java.javac.jar....可以把 .java编译成. ...

  4. 项目Beta冲刺Day6

    项目进展 李明皇 今天解决的进度 进行前后端联动调试 明天安排 完善程序运行逻辑 林翔 今天解决的进度 服务器端发布消息,删除消息,检索消息,个人发布的action 明天安排 图片功能遇到问题,微信小 ...

  5. 201621123068 《Java程序设计》第1周学习总结

    1. 本周学习总结 本周学习了如何使用Java来编写程序,还没展开学习具体的语言,但是也花了大量的时间搞清楚Java运行的原理.明白了Java是一种可以跨平台运行语言,搞清了jdk,jre,jvm之间 ...

  6. 小草手把手教你 LabVIEW 串口仪器控制——初识VISA串口

    有些人,学习一样东西时候,喜欢现成的例子.很多人学习一门技术,都喜欢现成的例子开始,比如学单片机的啊,最开始都是修改的例子吧,学语言的也是.最开始都是模仿.这个年头看书上的理论知识太浪费时间了.所以啊 ...

  7. Flask 文件和流

    当我们要往客户端发送大量的数据比较好的方式是使用流,通过流的方式来将响应内容发送给客户端,实现文件的上传功能,以及如何获取上传后的文件. 响应流的生成 Flask响应流的实现原理就是通过Python的 ...

  8. 集合Collection总览

    前言 声明,本文使用的是JDK1.8 从今天开始正式去学习Java基础中最重要的东西--->集合 无论在开发中,在面试中这个知识点都是非常非常重要的,因此,我在此花费的时间也是很多,得参阅挺多的 ...

  9. python之路--day15---软件开发目录规范

    软件开发目录规范 bin--启动文件 conf--配置文件 core--核心代码 db--数据文件 lib--常用功能代码 log--日志文件 readme--软件介绍

  10. 剑指offer-数组中出现次数超过一半的数字

    题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...