一、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. onbeforeunload事件兼容性操作

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. Linux中的一些点

    前言 本文记录一些日常使用linux的一些点. 系统负载评估 理解Linux系统负荷 查看 ps -ef [root@deployer ~]# ps -ef UID PID PPID C STIME ...

  3. 使用Google App Engine开始新的网站开发学习

    继长时间的迷茫后,我发现还是回归php网站开发更适合我,或者没有那么深刻,但至少要做点事情.不知道以后将从事什么样的工作,但现在找点事情做还是很好的.所以,为了激发我学习的热情,我在网上搜了一下免费云 ...

  4. lvs/dr+keepalived搭建成功后,开启防火墙,虚拟IP不能访问,但是真实IP却可以访问

    lvs/dr+keepalived搭建成功后,开启防火墙,虚拟IP不能访问,但是真实IP却可以访问,如果关闭防火墙虚拟IP就可以访问网站了,这个问题肯定是防火墙在作怪. 经过这两的不懈奋斗和大家的帮助 ...

  5. Tp5安全篇入门

    输入安全 设置public目录为唯一对外访问目录,不能把资源文件放入到应用目录: 使用框架提供的请求变量获取方法(Request类的param方法及input助手函数)而不是原生系统变量获取用户输入的 ...

  6. 微软亚洲研究院开源图数据库GraphView

    我们很高兴地宣布,由微软亚洲研究院系统算法组开发的图数据库GraphView通过GitHub平台开源.GraphView是一款中间件软件,方便用户使用关系数据库SQL Server 或Azure SQ ...

  7. 在GitHub上分享自己的项目

    GitHub主要是用作基于Git的分布式版本管理系统的库,可以保存和管理自己的代码,而且主要用作代码的合作开发. 注册GitHub后你就会有0.3G的免费空间,不过只能创建公开项目,这也满足代码分享的 ...

  8. C++走向远洋——54(项目一2、分数类的重载、取倒数)

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

  9. linux lsof常用方法

    lsof简介 lsof(list open files)是一个列出当前系统打开文件的工具,在linux环境下,任何事物都是以文件形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.系统 ...

  10. iOS 使用系统的UITabBarController 修改展示的图片大小

    1. 设置TabBarItem图片的大小 1 - (void)configurationAppTabBarAndNavigationBar { // 选中的item普通状态图片的大小 UIImage ...