JQuery学习---JQuery基础知识
JQuery介绍:
【参考API】http://jquery.cuishifeng.cn/
JQuery的低版本支持IE低版本,JQuery的2版本不太支持IE的低版本,推荐用1版本的最高1.12
- 找元素(直接,间接)
- 操作 (属性..)
JQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
JQuery对象: jQuery = $
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. jQuery 对象可以使用 jQuery 里的方法: $(“#test”).html();
比如: $("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML;
注意: 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法
同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
基本语法:$(selector).action()
选择器
基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器 $('[id="div1"]') $('["alex="sb"][id]')
表单选择器 $("[type='text']")----->$(":text") 注意只适用于input中type属性
$("input :checked") // 注意input标签和checked属性直接有一个空格
基本选择器 + 层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
<div>hello div</div>
<div class="div1">hello div1</div>
<p>hello p</p>
<p id="p1">hello p1</p>
<!-- --------------------------------------------------- -->
<div class="outer">
<div class="inner">
<p>hello p2</p>
</div>
<p>hello p3</p>
</div>
<p>毗邻标签</p>
</body>
</html> <script src="jquery-3.2.1.js"></script>
<script>
//基本选择器
$("div").css("color","red"); // 标签选择器
// $("div").css("color","red").css("background-color","yellow"); //JQuery支持级联样式
$("*").css("background-color","yellow"); // 全局选择器
$("#p1").css("color","blue"); // id选择器
$(".div1").css("color","green") // 类选择器 //组合选择器
$(".outer p").css("color","purple") ; //后代选择器,符合名字的后代都显示该样式
$(".outer>p").css("color","purple") ; //子代选择器,只在子代显示该样式
$(".outer+p").css("color","purple") ; //毗邻选择器,只在紧挨着outer元素的p子代显示该样式
$(".outer~p").css("color","purple") ; //subling选择器,只向下找子代的p标签显示该样式 </script>
基本筛选器 + 属性选择器 + 表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
<div class="div1">hello div1
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<p school="peking">清华大学</p>
<p school="beijing">北京大学</p>
<input type="text">
<input type="button">
</body>
</html> <script src="jquery-3.2.1.js"></script>
<script>
//基本筛选器,采用冒号
$(".div1 li:first").css("color","red"); //取出li的第一个元素
$(".div1 li:eq(1)").css("color","green"); //取出li的第2个元素[索引从0开始]
$(".div1 li:last").css("color","blue"); //取出li的最后一个元素
$(".div1 li:even").css("color","red"); //数组下标的偶数位变红色 //属性选择器,中括号
$("[school]").css("color","orange"); //此时school属性的所有的颜色都变了
$("[school='beijing']").css("color","palegreen"); //给特定的北京大学变浅绿色 // 表单选择器,中括号利用type标识
$("[type='text']").css("height","12px");
//另一种形式来表达,且只能用于input中type属性
$(":button").css("width","55px");
$("input: checked") // 注意空格
</script>
筛选器
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")【返回boolean值,有则true】
查找筛选器
$("div").children(".test") $("div").find(".test")
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings()$("div").children(".test") $("div").find(".test")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
<div class="div1">hello div1
<div class="div5">div5</div>
<div class="div15">div15</div>
<div class="div2">hello div2
<div class="div3">hello div3</div>
<div class="div4">hello grandson div4</div>
</div>
<div class="div4">hello uncle div4
<div class="div7">div7</div> <!-- 父子继承,会继承父类颜色 -->
</div>
<div class="div6">div6</div>
<div class="div8">div8</div>
</div>
</body>
</html>
<script src="jquery-3.2.1.js"></script>
<script>
// childer: 只找儿子辈; find:所有后代内查找
// $(".div1").children().css("color","red") // 不添加限定的,查找所有元素,div2, div3, grandson div4变色
// $(".div1").children(".div4").css("color","green") // 添加了限定只找儿子辈的div4变色,uncle div4变色
// $(".div1").find(".div4").css("color","blue"); // 查找div1下所有div4的标签grandson div4, uncle div4变蓝色,
</script>
$(".test").next() $(".test").nextAll() $(".test").nextUntil() + $("div").prev() $("div").prevAll() $("div").prevUntil()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
<div class="div1">hello div1
<div class="div5">div5</div>
<div class="div15">div15</div>
<div class="div2">hello div2
<div class="div3">hello div3</div>
<div class="div4">hello grandson div4</div>
</div>
<div class="div4">hello uncle div4
<div class="div7">div7</div> <!-- 父子继承,会继承父类颜色 -->
</div>
<div class="div6">div6</div>
<div class="div8">div8</div>
</div>
</body>
</html>
<script src="jquery-3.2.1.js"></script>
<script>
// $(".div2").next().css("color","palegreen"); // 找到了div2下一个div4以及子类div7
// $(".div2").nextAll().css("color","red"); // 找到了div2下面所有类div4以及子类div7,div6
// $(".div2").nextUntil(".div6").css("color","red"); // 从div2找到div6之前的元素,div4以及子类div7
// $(".div2").prev().css("color","green") // 找到div2上面一个元素,div5
// $(".div2").prevAll().css("color","red") // 找到div2上所有元素,div5,div15
// $(".div2").prevUntil(".div5").css("color","yellow") // 从找到div2向上找到div5之前的所有元素,div15
</script>
$(".test").parent() $(".test").parents() $(".test").parentUntil() + $("div").siblings()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
<div class="div1">hello div1
<div class="div5">div5</div>
<div class="div15">div15</div>
<div class="div2">hello div2
<div class="div3">hello div3</div>
<div class="div4">hello grandson div4</div>
</div>
<div class="div4">hello uncle div4
<div class="div7">div7</div> <!-- 父子继承,会继承父类颜色 -->
</div>
<div class="div6">div6</div>
<div class="div8">div8</div>
</div>
</body>
</html>
<script src="jquery-3.2.1.js"></script>
<script>
// $(".div2").parent().css("color","red"); // 找到div1的父类后,又因为子类继承了父类,所以颜色全部变红
// $(".div2").parents().css("color","yellow") //这里的parsents是一个集合,一直向上找,找到body,子类继承父类
// $(".div2").parentsUntil("body").css("color","blue") // 一直向上找到body之前的元素
$(".div2").siblings().css("color","red"); // 向上和向下找兄弟类,div5,div15,hello uncle div4,div7,div6,div8变色
</script>
实例演示:
【更多参考】http://www.cnblogs.com/yuanchenqi/articles/5663118.html
JQuery学习---JQuery基础知识的更多相关文章
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- Ant学习-001-ant 基础知识及windows环境配置
一.Ant 概要基础知识 Apache Ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发,用以构建应用,或结合其他开源测试工具例如 git.T ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- 学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
- 关于图计算&图学习的基础知识概览:前置知识点学习(Paddle Graph Learning (PGL))
关于图计算&图学习的基础知识概览:前置知识点学习(Paddle Graph Learning (PGL)) 欢迎fork本项目原始链接:关于图计算&图学习的基础知识概览:前置知识点学习 ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- jQuery框架-1.基础知识
jQuery简介 jQuery,顾名思义是JavaScript和查询(Query),jQuery是免费.开源的.它可以简化查询DOM对象.处理事件.制作动画.处理Ajax交互过程且兼容多浏览器的jav ...
- 学习Python3基础知识过程中总结
print()中end==""的用法 例子:用Python3输出九九乘法表: for i in range(1,10): for j in range(1,i+1): s=i*j ...
- three.js学习笔记--基础知识
基础知识 从去年开始就在计划中的three.js终于开始了 历史介绍 (摘自ijunfan1994的转载,感谢作者) OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于Op ...
随机推荐
- Linux 命令 su 和 sudo 比较
su : 可以用来切换到任何用户,但是要求输入目标用户的密码 比如:su - su - root (等价 su -) su - user su root 与 su - root 的区别在于,后者不切换 ...
- JavaScript数据结构-17.图结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- cppjieba分词学习笔记
cppjieba分词包主要提供中文分词.关键词提取.词性标注三种功能 一.分词 cppjieba分词用的方法是最大概率分词(MP)和隐马尔科夫模型(HMM),以及将MP和HMM结合成的MixSegme ...
- linux下统计文本行数的各种方法(一)
文件test1.txt有17行 方法一: awk '{print NR}' test1.txt | tail -n1
- latex排版(CTeX winEdit输出“系统找不到指定的文件”的终极解决办法)
WinEdit的菜单栏中:Options->Execution Modes 弹出的界面见下面的图: 看上图中“1”所示位置,后面3项出现了“?”号(出现“系统找不到指定的文件”的错误时,所有项后 ...
- Apache mod_rewrite
mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面.下面我详细说说它的使用方法!对初学者很有用的哦! 1.检测Apache是否支持mod_rewrite phpinfo() ...
- ASP.Net 之委托事件
1.首先给一张图让大家了解什么是委托?它的优缺点是什么? 2.通过代码的运用更深入地了解委托事件(窗体应用程序) 1)下面我们先定义一个无参数的委托. //1.0 定义一个自定义的委托,此委托的签名是 ...
- Mac下使用sublime Text打开隐藏目录
我们用 sublime Text 打开时,默认是看到非隐藏的目录和文件,如下图: 这时候在这个节目,按下 command +shift + 句号 快捷键,会自动切换 隐藏状态的, 这时候就可以切换成下 ...
- 设计模式之状态模式IFORNOIF(二十二)
今天大风大雨, 但心情还行, 继续撸DOTA 状态模式(state pattern)定义 当一个对象的内在状态改变时允许改变其行为, 这个对象看起来像是改变了其类 这在我们开发的业务中太常见了, 角色 ...
- tensorboard实现tensorflow可视化
1.工程目录 2.data.input_data.py的导入 在tensorflow更新之后可以进行直接的input_data的导入 # from tensorflow.examples.tutori ...