初步学习jquery学习笔记（一）
什么是jquery？
- html元素选取
- html元素的操作
- css操作
- html事件的函数
- javacript的特效
- html的遍历和修改
- ajex
<head> <script src="jquery-1.10.2.min.js"></script> </head>
2.使用CNN
百度 <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>
又拍 <head> <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> </head>
新浪 <head> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>
谷歌 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head>
微软 <head> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> </head>
jQuery基本语法
- 美元符号定义jquery
- selector选择符查询和查找对应html元素
- jquery的action()执行对元素的操作
$(document).ready(
function(){
//开始书写对应的jQuery代码
}
)
- 防止文档加载之前运行jQuery代码-在DOM加载完成之后才进行操作
$(document).ready(
function(){
//执行代码
}
)
//或者
$(function(){
//执行代码
})
//javascript入口函数
window.onload=function(){
//执行代码
}
|
|
window.onload
|
$(doucument).read()
|
|
执行时机
|
必须等待网页全部加载完毕，包括图片等
|
只需要等待网页中dom结构加载完毕，就可以执行包裹代码
|
|
执行次数
|
只能执行一次，如果执行两次，那么第一次执行会全部覆盖
|
可以执行多次，第n次都不会被上一次覆盖 |
|
简写方案
|
无
|
$(function(){});
|
- jQuery选择器允许对html元素
- jQuery选择器基于元素id、类、属性、属性值等进行查找html元素，它基于已经存在的css选择器。除此之外，它还有一个自定义的选择器。
- jQuery中所有的选择器都是通过美元符号开头$()
元素选择器
<html>
<head>
<title>
初始化jQuery
</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(
function(){
$("p").hide();
}
)
})
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
#id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落，id为test</p>
<button>点一下我</button>
</body>
</html>
class选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head> <body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body> </html>
其他例子
| $("*") | 选择所有的元素 |
| $(this) | 选择当前html元素 |
| $("p.intro") | 选择class为intro的p标签 |
| $("p:first") | 选择第一个<p>元素 |
| $("ul li:first") | 选取第一个<ul>元素的第一个<li>元素 |
| $("ul li:first-child") | 选取每个<ul>元素的第一个<li>元素 |
| $("[href]") | 选取带有href属性的元素 |
| $("a[target="_blank"]") | 选取所有target属性值等于"_blank"的<a>元素 |
| $("a[target!='_blank']") | 选取所有属性值不等于'_blank'的<a>元素 |
| $("tr:even") | 选取偶数位置的<tr>元素 |
| $("tr:odd") |
选取奇数位置的
<tr>元素
|
初步学习jquery学习笔记（一）的更多相关文章
- 初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- 初步学习jquery学习笔记（六）
jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...
- 初步学习jquery学习笔记（五）
jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...
- 初步学习jquery学习笔记（四）
Jquery HTML Jquery 捕获内容 什么是dom? DOM = Document Object Model(文档对象模型) 获取内容 text()获取所选元素的文本内容 html()获取所 ...
- 初步学习jquery学习笔记（二）
jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
随机推荐
- jquery preventDefault()方法 语法
jquery preventDefault()方法 语法 作用:preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交).大理石平台价格 语法:event ...
- CSP-S2 游记
CSP-S2 游记 & AFO 感想 Day0 早上考了一场式,非常简单,但是懒得写正解.230pts. 晚上听了一下WYQ大神的考前直播,写了一下树上倍增(我是不会告诉你我还写炸了) 与lu ...
- JavaWeb-SpringBoot_使用H2数据库实现用户注册登录
使用Gradle编译项目 传送门 前端资源同:使用MySQL数据库实现用户管理_demo 传送门 H2:SpringBoot内置持久化数据库 使用H2数据库实现用户注册登录 用户可以在index.h ...
- jsPDF生成pdf文件和中文编码
jsPDF的简单使用以及中文编码问题的解决 文中js通过CDN引入,若是为了加载时间最好下载至本地. jsPDF的使用 jsPDF简介 jsPDF 是一个基于 HTML5 的客户端解决方案,用于在客户 ...
- crm 项目的部署
发布CRM你将使用以下软件 nginx uWSGI CentOS7 CRM项目文件 virtualenv supervisor WSGI.uWSGI python web服务器开发使用WSGI协议(W ...
- C++入门经典-例6.19-字符串类型之修改string字符串的单个字符串
1:头文件 #include <string> 声明一个string变量,形式如下: std::string s; 初始化string类型的变量: std::string s1(" ...
- DS博客大作业--树 （陈梓灿组）
1.树的存储结构说明 定义的结构体中,name是用于存放文件名称,string类型是字符串类型,定义了child孩子结点和brother兄弟结点. 2.树的函数说明 1.main函数 main函数中主 ...
- C博客作业05--指针 批改总结
1.0如题 1.1 一.评分规则 1.伪代码务必是文字+代码描述,直接反应代码,每题扣1分 2.提交列表没内容,或者太简单,每题得分0分.注意选择提交列表长的题目介绍. 3.代码格式不规范,包括命名随 ...
- MySQL 建表时 date 类型的默认值设置
在执行下面 SQL 语句时发现报错 CREATE TABLE `jc_site_access_pages` ( `access_date` date NOT NULL DEFAULT '0000-00 ...
- Linux高级调试与优化——内存泄漏实战分析
最近在整理Linux调试方面的文档,正好碰到了一个内存泄漏踩栈的问题,借此机会记录一下分析过程. 首先,发现问题之后,赶紧看一下产生coredump文件没有,果不其然,产生了coredump,果断上g ...