(一)认识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. 开篇/javascript基础知识点

    html css js 分别是一个网站的:内容  样式 行为: js 的三种样式:行内 内嵌 外链. 函数的特性:1.可以重复执行的代码块.2.不调用不执行.3.要访问里面,必须先执行. 内置对象:j ...

  2. 【Java】0X001.配置开发环境,JDK、classpath等

    [Java]0x01 配置开发环境,JDK.CLASSPATH等 一. 下载JDK安装文件 首先,进入Oracle官网Java页面. 注意,要下载的是JDK而不是JRE,这点很重要,因为JRE并不包含 ...

  3. Leetcode 35——Search Insert Position

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  4. Beta第六天

    听说

  5. Alpha第三天

    Alpha第三天 听说 031502543 周龙荣(队长) 031502615 李家鹏 031502632 伍晨薇 031502637 张柽 031502639 郑秦 1.前言 任务分配是VV.ZQ. ...

  6. Java 中 compareTo方法问题

    compareTo方法原理:先读取出字符串的第一个“字母”进行比较,比较的方法是ascii码表的值(字符所对应的十进制值),如果前面的大那么返回1,后面的大返回-1:此位置相同,继续比较下一位,直到最 ...

  7. XCode Build Settings中几种Search Paths

    Header search path:去查找头文件的路径,同在在你需要使用第三方库的时候,在这里设置你的头文件路径目录,如图 <code><span class="str& ...

  8. 关于collectionView和tableView的两种cell的出列方法的区别

    相信好多人一定会对collectionView和tableView的两种cell出列方法有所疑问,下面以UICollection为例子进行举例说明 假设我们已经创建了一个collectionView, ...

  9. Python之旅_第一章Python入门

    一.编程语言分类 1.机器语言:即计算机能听懂的二进制语言,0000 0001,直接操控硬件: 2.汇编语言:简写的英文标识符代替二进制语言,本质同样是直接操控硬件: 3.高级语言:用更贴近人类的语言 ...

  10. 前端基础之CSS-Day13

    1.CSS 语法 1.1.CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... proper ...