jQuery的简单用法(jQuery的简介,选择器,属性和css,文档处理)
一、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. 优点
- 开源免费
- 核心理念是write less,do more(写得更少,做得更多)
- 轻量级 :源码1.11.js大小是286kb,压缩1.11.min.js大小是94.1k。、
- 兼容性好
- jQuery的语法设计可以使开发者更加便捷
- 例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
- jQuery能够使用户的html页面保持代码和html内容分离
- 不用再在html里面插入一堆js来调用命令了,只需要定义id即可
- 文档说明很全
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属性【掌握】
[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(...) 设置文本值,如果有标签,将被转义 --> < < & & > <
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,文档处理)的更多相关文章
- Jquery(一) 初识Jquery,简单使用Jquery。
距离上一篇博文好像隔了很久的时间了额.好像是堕落了一阵子,前些时间去杭州找工作,被租房的事情给搞懵逼了,然后就回来了,回来在修炼一个月在出去奋斗把!加油,这两天把jquery,easyui和boots ...
- jQuery - 1.简单的JQuery
1.简单的JQuery 2.jQuery对象(包装集).Dom对象 3.JQuery提供的函数 1.简单的JQuery $(document).ready(function () { alert(&q ...
- python 之 前端开发( jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作)
11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
- 使用python编写量子线路打印的简单项目,并使用Sphinx自动化生成API文档
技术背景 该文章一方面从量子线路的打印着手,介绍了一个简单的python量子线路工程.同时基于这个简单的小工程,我们顺带的介绍了python的API文档自动化生成工具Sphinx的基本使用方法. 量子 ...
- vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
- js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...
- 33 -jQuery 属性操作,文档操作(未完成)
- [转] vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
随机推荐
- onbeforeunload事件兼容性操作
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Linux中的一些点
前言 本文记录一些日常使用linux的一些点. 系统负载评估 理解Linux系统负荷 查看 ps -ef [root@deployer ~]# ps -ef UID PID PPID C STIME ...
- 使用Google App Engine开始新的网站开发学习
继长时间的迷茫后,我发现还是回归php网站开发更适合我,或者没有那么深刻,但至少要做点事情.不知道以后将从事什么样的工作,但现在找点事情做还是很好的.所以,为了激发我学习的热情,我在网上搜了一下免费云 ...
- lvs/dr+keepalived搭建成功后,开启防火墙,虚拟IP不能访问,但是真实IP却可以访问
lvs/dr+keepalived搭建成功后,开启防火墙,虚拟IP不能访问,但是真实IP却可以访问,如果关闭防火墙虚拟IP就可以访问网站了,这个问题肯定是防火墙在作怪. 经过这两的不懈奋斗和大家的帮助 ...
- Tp5安全篇入门
输入安全 设置public目录为唯一对外访问目录,不能把资源文件放入到应用目录: 使用框架提供的请求变量获取方法(Request类的param方法及input助手函数)而不是原生系统变量获取用户输入的 ...
- 微软亚洲研究院开源图数据库GraphView
我们很高兴地宣布,由微软亚洲研究院系统算法组开发的图数据库GraphView通过GitHub平台开源.GraphView是一款中间件软件,方便用户使用关系数据库SQL Server 或Azure SQ ...
- 在GitHub上分享自己的项目
GitHub主要是用作基于Git的分布式版本管理系统的库,可以保存和管理自己的代码,而且主要用作代码的合作开发. 注册GitHub后你就会有0.3G的免费空间,不过只能创建公开项目,这也满足代码分享的 ...
- C++走向远洋——54(项目一2、分数类的重载、取倒数)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- linux lsof常用方法
lsof简介 lsof(list open files)是一个列出当前系统打开文件的工具,在linux环境下,任何事物都是以文件形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.系统 ...
- iOS 使用系统的UITabBarController 修改展示的图片大小
1. 设置TabBarItem图片的大小 1 - (void)configurationAppTabBarAndNavigationBar { // 选中的item普通状态图片的大小 UIImage ...