一、jQuery简介

1.1.  JS库

JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。

1.2.  当前流行的 JavaScript 库有:

① jQuery ,最流行

② EXT JS,2.0开始收费

③ Prototype,对js扩展,框架开发。

④ Dojo

⑤ Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。基于jQuery 一个UI工具

⑥ VUE

⑦ Layui

⑧ easyui

1.3.  jQuery介绍

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,

还兼容各种浏览器,jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

1.4.  优点

  1. 开源免费
  2. 核心理念是write less,do more(写得更少,做得更多)
  3. 轻量级    :源码1.11.js大小是286kb,压缩1.11.min.js大小是94.1k。、
  4. 兼容性好
  5. jQuery的语法设计可以使开发者更加便捷
  6. 例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
  7. jQuery能够使用户的html页面保持代码和html内容分离
  8. 不用再在html里面插入一堆js来调用命令了,只需要定义id即可
  9. 文档说明很全

1.5.  使用jquery的步骤

Step1:把jquery库引入工程中

Step2:<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

Step3:使用jquery

1.6.  jQuery基本语法

jquery入口:注意:一个页面可以有多个,建议只写一个。

$(document).ready(function(){

//页面元素加载完毕执行

});

//  js

window.onload=function(){};

简写:

$(function(){

});

等价:

jQuery(function(){});

jQuery对象和dom对象转换

$(function(){

//jquery对象  约定变量名前加上$符号

var $divObj = $("#mydiv");

//把jquery对象转为dom对象

var divObj = $divObj.get(0);

//divObj.html('hhhh ');

divObj = $divObj[0];

//document.getElementById("mydiv");

divObj.innerHTML  ='hello';

//js中的dom对象  转成 jquery中的对象

var divObj2 = document.getElementById("mydiv");

//转化为jquery对象

var $divObj2 =  $(divObj2);

$divObj2.html("hehehheheheheeh");

});

二、选择器【重要】

2.1基本选择器【重要】   跟css中的选择器对应

#id , id选择器,<xxx id=""> 通过id值获得元素

element,标签选择器,<xxx> 通过标签名获得元素

.class ,类选择器,<xxx class=""> 通过class值获得元素。注意:使用点开头

s1,s2,...  并集选择器,将多个选择器的结果添加一个数组中。

*               所有

2.2层级

A  B ,获得A元素内部所有的B后代元素。(爷孙)

A > B ,获得A元素内部所有的B子元素。(父子)

A + B ,获得A元素后第一个兄弟并且为B。(兄弟)

A ~ B ,获得A元素后面的所有的兄弟B。(兄弟)

2.3基本过滤

过滤选择器格式 “:关键字”

:first   , 第一个

:last    ,最后一个

:eq(index) ,获得指定索引

:gt(index) 大于

:lt(index) 小于

:even 偶数,从 0 开始计数。例如:查找表格的1、3、5...行(即索引值0、2、4...)

:odd 奇数

:not(selector) 去除所有与给定选择器匹配的元素

2.4.内容过滤

:empty  当前元素是否为空(是否有标签体--子元素、文本)

:has(...)  当前元素,是否含有指定的子元素

:parent    匹配含有子元素或者文本的元素

:contains( text ) 标签体是否含有指定的文本

2.5可见性过滤[掌握]

:hidden   隐藏。特指 <xxx style="display:none;">

:visible   可见(默认)

2.6属性【掌握】

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

[attrSel1][attrSel2][attrSelN]

[属性名]                                   获得指定的属性名的元素

[属性名=值]                             获得属性名 等于 指定值的 的元素【1】

[属性名!=值]                            获得属性名 不等于 指定值的 的元素

[as1][as2][as3]....                    复合选择器,多个条件同时成立

2.7子元素过滤

:nth-child(index)  ,获得第几个孩子,从1开始。

:first-child , 获得第一个孩子

:last-child , 获得最后孩子

:only-child , 获得独生子

2.8表单过滤

:input  所有的表单元素。(<input> / <select> / <textarea> / <button>)

:text                                            文本框<input type="text">

:password                                  密码框<input type=" password ">

:radio                                          单选<input type="radio">

:checkbox                                   复选框<input type="checkbox">

:submit                                       提交按钮<input type="submit">

:image                                        图片按钮<input type="image" src="">

:reset                                          重置按钮<input type="reset">

:file                                             文件上传<input type="file">

:hidden                                       隐藏域<input type="hidden">  ,还可以获得<xxx style="display:none">

其他值:<br> <option>  ,存在浏览器兼容问题

:button                                        所有普通按钮。 <button >  或 <input type="button">

2.9表单对象属性过滤【掌握】

:enabled                                   可用

:disabled                                   不可用。<xxx disabled="disabled"> 或<xxx disabled="">  或  <xxx disabled>

:checked                                    选中(单选框radio、复选框 checkbox)

:selected                                    选择(下拉列表 select option)

三、属性和CSS

3.1.  属性【掌握】   操作标签的属性

attr(name)   获得指定属性名的值  val()  attr(“value”);

attr(key ,val ) 给一个指定属性名设置值

attr(prop ) 给多个属性名设置值。参数:prop  json数据

{k : v , k : v , .....}

{key:值,key2:值2}   json数据

removeAttr(name)  移除指定属性

3.2.  CSS类

addClass("my")  追加一个类

removeClass("my")  将指定类移除

toggleClass("my")  如果有my将移除,如果没有将添加。

3.3.  HTML代码/文本/值【掌握】

val()        获得value的值

val(text)  设置value的值

html()     获得html代码,含有标签

html(...)  设置html代码,如果有标签,将进行解析。

text() 获得文本值,将标签进行过滤

text(...) 设置文本值,如果有标签,将被转义  -->   <  &lt;   &  &amp;  >  &lt;    &nbsp;

3.4.  CSS

<xxx style="key:value; key:value; ">

css(name)  获得指定名称的css值

css(name ,value) 设置一对值

css(prop) 设置一组值   参数为json  赋多个样式

3.5.  位置

offset()      获得坐标 , 返回JSON对象,{"top":200, "left" : 100}

offset(...)    设置坐标。例如:$(this).offset({"top":0 , "left" : 0})

scrollTop()  垂直滚动条 滚过的距离

scrollLeft()  水平滚动条 滚过的距离

3.6.  尺寸

height([...]) 获得 或 设置 高度

width([...])获得 或 设置 宽度

四、文档处理

4.1.  内部插入【掌握】

A.append(B)  将B插入到A的内部后面(之后的串联操作,操作A)

<A>

<C><C>

<B></B>

<A>

A.html(B);   <A><B></B></A>

A.prepend(B) 将B插入到A的内部元素前面

<A>

<B></B>

<C></C>

<A>

4.2.  外部插入【掌握】

A.after(B)  , 将B插入到A后面(同级)

<A></A>

<B></B>

A.before(B) ,将B插入到A前面

4.3.  删除[掌握]

empty()  清空标签体

remove() 删除当前对象。如果之后再使用,元素本身保留,绑定事件 或 绑定数据 都会被移除

detach() 删除当前对象。如果之后再使用,元素本身保留,绑定事件 或 绑定数据 都保留

4.4.  复制

clone() 克隆

even :指示事件处理函数是否会被复制。V1.5以上版本默认值是:false

jQuery的简单用法(jQuery的简介,选择器,属性和css,文档处理)的更多相关文章

  1. Jquery(一) 初识Jquery,简单使用Jquery。

    距离上一篇博文好像隔了很久的时间了额.好像是堕落了一阵子,前些时间去杭州找工作,被租房的事情给搞懵逼了,然后就回来了,回来在修炼一个月在出去奋斗把!加油,这两天把jquery,easyui和boots ...

  2. jQuery - 1.简单的JQuery

    1.简单的JQuery 2.jQuery对象(包装集).Dom对象 3.JQuery提供的函数 1.简单的JQuery $(document).ready(function () { alert(&q ...

  3. python 之 前端开发( jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作)

    11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...

  4. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

  5. 使用python编写量子线路打印的简单项目,并使用Sphinx自动化生成API文档

    技术背景 该文章一方面从量子线路的打印着手,介绍了一个简单的python量子线路工程.同时基于这个简单的小工程,我们顺带的介绍了python的API文档自动化生成工具Sphinx的基本使用方法. 量子 ...

  6. vuex最简单、最直白、最全的入门文档

    前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...

  7. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  8. 33 -jQuery 属性操作,文档操作(未完成)

  9. [转] vuex最简单、最直白、最全的入门文档

    前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...

随机推荐

  1. Python---13靠谱的Pycharm安装详细教程

    昨天自学廖雪峰老师的python课程时,用的sublime编辑器,在命令行模式进行的输出,输出结果一直报错,说Python版本有问题,但在版本是满足要求的.最后在同事的电脑上运行了一下,是可以正常输出 ...

  2. 吴裕雄--天生自然 PHP开发学习:在centos7操作系统下使用命令安装ThinkPHP 5框架

    前提条件是系统已经安装好了php,一般来说安装好的php根目录是:/var/www/html 系统安装composer(我使用的系统是centos7) .使用命令下载 curl -sS https:/ ...

  3. Nginx部署前后端分离服务

    飘过... 一,安装Nginx 二,配置nginx 一般nginx配置文件在etc目录下 另,如何找nginx.conf配置文件: 在前后端分离端项目里,前端的代码会被打包成为纯静态文件.使用 Ngi ...

  4. Qt 隐藏标题栏 窗口移动 鼠标事件

    摘要 隐藏标题栏 头文件声明鼠标移动虚函数 .cpp文件实现功能 1 setWindowFlags(Qt::FramelessWindowHint | windowFlags()); 无标题栏移动窗体 ...

  5. 【01】React 环境搭建

    react来自于Facebook公司的开源项目 react 组件化模块化  开发模式 react通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互  (数据绑定) react 基于jsx的 ...

  6. C++扬帆远航——11(斐波那契数列)

    /* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:Feibo.cpp * 作者:常轩 * 微信公众号:Worldh ...

  7. 达拉草201771010105《面向对象程序设计(java)》第六周学习总结

    达拉草201771010105<面向对象程序设计(java)>第六周学习总结 第一部分:理论知识 1.类.超类和子类 类继承的格式: class 新类名extends已有类名一般来说,子类 ...

  8. 7-29 jmu-python-不同进制数 (10 分)

    输入一个十进制整数,输出其对应的八进制数和十六进制数.要求采用print函数的格式控制进行输出,八进制数要加前缀0o,十六进制数要加前缀0x. 输入格式: 输入一个十进制整数,例如:10 输出格式: ...

  9. TCP/IP协议概要--01

    学习一下tcp/ip协议,还是很枯燥,哎..... 图片的是从下到上对TCP/IP的协议进行描述的.主要是的描述每一层协议的特点 该层对应的是最底层的数据链路层,即图中的以太网驱动程序那一层. 该层是 ...

  10. VMWare12pro安装Centos 6.9教程

    VMWare下Centos 6.9安装教程,记录如下 1.新建虚拟机 (1)点击文件-->新建虚拟机 (2)选择 自定义(高级)-->下一步 (3)选择Workstation 12.0-- ...