JQuery常用知识点及示例
1、JQuery 名称解释
JQuery是封装了常用JS操作函数的一个库文件
JQuery = Javascript + Query (查询)
Jquery意思即指: 强大的DOM节点查询
2、官网:http://jquery.com/
JQuery2.*不再支持IE6、7、8，上线环境使用压缩版可以省带宽
3、基本选择器
同CSS选择器
<body>
<div id="test1">id test1</div>
<div class="test2">class test2</div>
<div class="test2">class test2</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
<script>
// id选择器
$('#test1').css('background' , 'gray');
// 标签选择器
$('p').css('background' , 'blue');
// 类选择器
$('.test2').css('background' , 'green');
// *
$('*').css('background','pink');
</script>
4、层次选择器
<p>
<input type="text" />
<span>1</span>
<span>2</span>
</p>
<p>
<input type="text" />
<span>3</span>
<span>4</span>
</p>
<p>
<input type="text" />
<span>5</span>
<span>6</span>
</p>
<div><span>7</span></div>
<script>
// div下的span
$('div span').css('background' , 'orange');
// 每个prev元素之后的1个next元素被选中
//$('input + span').css('background' , 'gray');
// 每个prev元素之后的所有同辈siblings元素
$('input ~ span').css('background' , 'gray');
</script>
5、属性选择器
<body>
<p>Email:<input type="text" name="email" /></p>
<p>密码:<input type="text" name="password" /></p>
<p>重复密码:<input type="text" name="repassword" /></p>
<p>学号:<input type="text" name="stunum" /></p>
<p>学分:<input type="text" name="stuscore" /></p>
</body>
<script>
$('input[name="email"]').css('background' , 'gray');
$('input[name!="email"]').css('background' , 'blue');
//找包含password的属性
$('input[name*="password"]').css('background' , 'pink');
//找开头是stu的属性
$('input[name^="stu"]').css('background' , 'orange');
//找以word结尾的属性
$('input[name$="word"]').css('background' , 'red');
</script>
6、基础过滤器(配合选择器使用)
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
</body>
<script>
$('li:first').css('background','red'); // 找第1个
$('li:odd').css('background','blue'); // 找奇数个,从0计数
$('li:even').css('background','blue'); // 找偶数个,从0计数
$('li:eq(2)').css('background' , 'purple'); // 找第2个,从0计数
</script>
7、内容过滤器
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
<td>26</td>
</tr>
<tr>
<td>孙尚香</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>赵云</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>花木兰</td>
<td></td>
<td><span>22</span></td>
</tr>
</table>
<p><br /></p>
<p>a</p>
<p></p>
</body>
<script>
$('td:contains("女")').css('background' , 'blue'); // 含有"女"的td
$('td:empty').css('background' , 'green'); // 空的td
$('td:has(span)').css('background' , 'pink'); // 含有span的td
$('p:parent').css('background' , 'black'); // 有内容的p标签,(当爹的p标签)
</script>
前面介绍的都是找对象的方法，接下来我们来操作对象
8、操作普通属性
attr一个参数是获取属性，两个参数是赋值
<body>
<img src="on.jpg" alt="" onclick="bian()" />
</body>
<script>
function bian() {
if($('img').attr('src').indexOf('on') > -1) {
$('img').attr('src' , 'off.jpg');
} else {
$('img').attr('src' , 'on.jpg');
}
}
</script>
9、操作css属性
css()传一个值是获取属性值，传两个是赋值
因为width和height操作频繁，jquery给我们封装了width()和height()方法直接获取宽高
<style>
div {
width: 300px;
height: 300px;
border: 1px solid blue;
}
</style>
<body>
<h1>jQuery操作CSS属性</h1>
<div onclick="bian();">点击宽高+10px</div>
</body>
<script>
function bian() {
var w = parseInt( $('div').css('width') );
var h = parseInt( $('div').css('height') );
var b = parseInt( $('div').css('borderBottomWidth') );
$('div').css('width' , w+10+'px');
$('div').css('height' ,h+10+'px');
$('div').css('borderBottomWidth' ,b+1+'px');
}
/*
function bian() {
var w = $('div').width();
var h = $('div').height();
var b = parseInt($('div').css('borderBottomWidth'));
$('div').css('width' , w+10+'px');
$('div').css('height' , h+10+'px');
}*/
</script>
10、删除节点（remove）
增加节点(append)
a.after(b) 在a后增加b
a.before(b)在a前面加b
<body>
<input type="button" value="清空ul" onclick="qing()" />
<input type="button" value="删除ul" onclick="shan()" />
<input type="button" value="增加li" onclick="zeng()" />
<input type="button" value="再增" onclick="zeng2()" />
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li onclick="alert('当')">导航4</li>
</ul>
</body>
<script>
function qing() {
$('ul').empty();
}
function shan() {
$('ul').remove();
}
function zeng() {
//$('<li>导航五</li>').appendTo($('ul')); //加在ul后
$('ul').append($('<li>导航6</li>'));
}
function zeng2(){
$('ul').after($('<ol><li>哈哈</li></ol>'));
$('ol').append($('ul li:last'));
}
</script>
11、节点包裹
<body>
<h1>jQuery包结点</h1>
<input type="button" value="用p标签包住每个input" onclick="wp()" />
<input type="button" value="用p标签包住所有input" onclick="wpa()" />
<input type="button" value="li中的文字加粗" onclick="cu()" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
</body>
<script>
//给input标签分别加上p标签
function wp() {
$('input:text').wrap('<p></p>');
}
//给input标签整体加上一个p标签
function wpa() {
$('input:text').wrapAll('<p></p>');
}
//将li变粗
function cu() {
$('li').wrapInner('<b></b>');
}
</script>
12、jquery对象与DOM对象的关系
<body>
<h1>jQuery对象与DOM对象的关系</h1>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
<p id="test">test</p>
</body>
<script>
console.log($('li')); //jQuery对象,dom对象被放置在jQuery对象内部
$('li')[0]; //这个是存储在jQuery对象内的第1个li DOM对象
// jQuery对象与DOM对象的转换
var li = $('li').get(1); // 得到第1个li
li.style.background = 'blue';
var li3 = document.getElementsByTagName('li')[3];
$(li3).css('background' , 'green'); //DOM对象li3作为参数传给$(),转为jQuery对象
</script>
13、jquery动画
2秒消失的div
<style>
div {
width: 400px;
height: 400px;
background: blue;
}
</style>
<body>
<div></div>
</body>
<script>
$('div').click(function(){
$(this).hide(2000);
});
</script>
向上收起的广告图
<body>
<div id="ad">
<img src="./sm.jpg" alt="" />
</div>
</body>
<script>
$('#ad').delay(3000).slideUp(2000); //slideUp、slideDown
</script>
图片淡入淡出
<body>
<div id="ad">
<img src="t.jpg" alt="" />
</div>
</body>
<script>
// $('#ad img').fadeOut(2000);
$('#ad img').fadeOut(2000 , function(){
$('#ad img').attr('src' , 'sm.jpg').fadeIn(2000);
});
</script>
14、ajax之get请求
<body>
用户名: <input type="text" name="username" /><span id="reg"></span>
</body>
<script>
$('input:text').blur(function(){
var url = '30.php?u=' + $(this).val(); //对接收的值做判断，返回0或1
$.get(url , function(res){
if(res == '1') {
$('#reg').html('<font color="red">已被占用</font>');
} else {
$('#reg').html('<font color="green">可以使用</font>');
}
});
});
</script>
15、ajax之post请求
<body>
<h1>jquery 发送POST ajax查询</h1>
<form action="">
<p>用户名:<input type="text" name="u" /></p>
<p>密码:<input type="text" name="p" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
<script>
$('form').submit(function(){
var data = {
'u' : $('input[name="u"]').val(),
'p' : $('input[name="p"]').val()
};
$.post('31.php' , data , function(res){
alert(res);
});
return false;//阻止form提交
});
</script>
16、ajax监听函数
ajax提交时让提交按钮变得不能点并显示“提交中”
ajaxStart()、ajaxSuccess()这几个函数,只能绑定$(document)结点上
<body>
<h1>$.ajax()</h1>
<form action="">
<input type="submit" value="提交" />
</form>
</body>
<script>
$('form').submit(function(){
var param = {
url : '33.php',
type : 'post',
data : {u:'lisi',pass:'11111'},
success:function(res){
alert(res);
}
};
$.ajax(param);
});
$(document).ajaxStart(function(){
$('input:submit').val('提交中').prop('disabled',true);
});
</script>
17、jquery对象的遍历
全选、全不选与反选
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
<body>
<h1>遍历jQuery对象的内部的DOM对象</h1>
<input type="button" value="反选" onclick="quan()" />
<input type="button" value="反选" onclick="bu()" />
<input type="button" value="反选" onclick="fan()" />
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
</body>
<script>
function quan(){
$('input:checkbox').prop('checked',true);
}
function fan(){
$('input:checkbox').prop('checked',false);
}
function fan() {
console.log($('input:checkbox'));
$('input:checkbox').each(function(){
this.checked=!this.checked;
$(this).prop('checked' , !$(this).prop('checked') );
});
}
</script>
18、jquery处理事件的特点
1:和原生事件的语法区别
原生绑定: xxDOMNode.onclick=function(){} , xx.onmousever = function();
原生触发: xxDOMNode.click(), xx.submit(); xx.focus();
jQuery绑定: $(selector).click(function(){});
jQuery触发: $(selector).click();
2:和xx.onclick等的绑定次数的区别
xx.onclick = function(){},是给onclick属性赋值,赋多个值,前面的被覆盖,只有最后一个函数被调用
$(selector).click(函数1);
$(selector).click(函数2);
$(selector).click(函数3); // 会按绑定的顺序,逐个执行
<body>
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="text" value="" />
</body>
<script>
$('input:first').click(function() {
alert('你点击了按钮1,接下来我把焦点切到文本框中');
$('input:last').focus();
});
$('input:last').focus(function(){
$(this).css('border' , '1px solid yellow');
});
// 原生绑定
document.getElementsByTagName('input')[1].onclick = function() {
alert('丁丁');
}
document.getElementsByTagName('input')[1].onclick = function() {
alert('当当');
}
$('input:eq(1)').click(function(){alert('1')});
$('input:eq(1)').click(function(){alert('2')});
$('input:eq(1)').click(function(){alert('3')});
</script>
19、ready事件
dom加载完毕就会执行，而window.onload需要等待整个页面加载完毕
<body>
<h1>onload事件</h1>
<img src="21.php" alt="" />
</body>
<script>
// $(document).ready(function(){alert('DOM已加载完毕,不等图片')});
//等价于ready
$(function(){
alert('DOM已加载完毕');
});
window.onload = function() {
alert('图片终于下载完毕了');
}
</script>
20、一次绑定
只会执行一次
<body>
<input type="button" value="测试" />
</body>
<script>
$('input').one('click' , function(){
alert('1111');
});
</script>
JQuery常用知识点及示例的更多相关文章
- jQuery常用知识点大总结
目录 jQuery jQuery介绍 jQuery的优势 jQuery的引入方式有两种: jQuery对象和dom对象 jQuery选择器 基本选择器(同css) 基本筛选器(选择之后进行过滤): 属 ...
- JQuery:常用知识点总结
jQuery本质上就是一个外部的js文件(jQuery.js),该文件中封装了很多js代码,实现了很多功能.并且jQuery有非常丰富的插件,大多数功能都有相应的插件解决方案.jQuery的宗旨是wr ...
- jquery常用函数与方法汇总
1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...
- jQuery 常用核心方法
jQuery 常用核心方法 .each() 遍历一个jQuery对象,为每个匹配元素执行一个函数 $('p').each(function(idx,node){ $(node).text(idx + ...
- 《JQuery常用插件教程》系列分享专栏
<JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
- mootools常用特性和示例（基础篇1）
网上关于mootools这个库的信息很少. 公司一些老的项目用到了mootools库,因为要维护,所以接触到了mootools. mootools(文档)官网:http://www.chinamoot ...
- jQuery常用事件，each循环，引用当前时间
jQuery常用事件,each循环,引用当前时间 1.常用事件 click(function(){...}) #点击时触发hover(function(){...}) #鼠标移到时就触发blur(fu ...
- oracle常用函数及示例
学习oracle也有一段时间了,发现oracle中的函数好多,对于做后台的程序猿来说,大把大把的时间还要学习很多其他的新东西,再把这些函数也都记住是不太现实的,所以总结了一下oracle中的一些常用函 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
随机推荐
- docker：（1）docker基本命令使用及发布镜像
docker镜像可以完全看作一台全新的电脑使用,无论什么镜像都是对某一东西进行了配置,然后打包后可以快速移植到需要的地方直接使用 省去复杂的配置工作 比如java web项目部署,如果是新部署,需要装 ...
- 推荐系统 LFM 算法的简单理解，感觉比大部分网上抄来抄去的文章好理解
本文主要是基于<推荐系统实践>这本书的读书笔记,还没有实践这些算法. LFM算法是属于隐含语义模型的算法,不同于基于邻域的推荐算法. 隐含语义模型有:LFM,LDA,Topic Model ...
- 微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
- 小白的Python之路 day5 shutil模块
shutil模块 一.主要用途 高级的文件.文件夹.压缩包 等处理模块 二.常用方法详解 1.shutil.copyfileobj(fsrc, fdst) 功能:把一个文件的内容拷贝到另外一个文件中, ...
- 15.5 自学Zabbix之路15.5 Zabbix数据库表结构简单解析-其他 表
点击返回:自学Zabbix之路 自学Zabbix之路15.5 Zabbix数据库表结构简单解析-其他 表 1. Actions表 actions表记录了当触发器触发时,需要采用的动作. 2.Aler ...
- 2018年1月 常用的linux命令
项目中经常用到的Linux命令 (注意:linux命令要小写哦!) (1).ls 显示当前目录下的文件 (2).vi vim 进入编辑器,可以选择你要编辑的文档,一般我们将项目打包成jar包来 ...
- slave延迟很大优化方法
一般而言,slave相对master延迟较大,其根本原因就是slave上的复制线程没办法真正做到并发.简单说,在master上是并发模式(以InnoDB引擎为主)完成事务提交的,而在slave上,复制 ...
- （2环境架设）从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练 1综述http://www.cnblogs.com/jsxyhelu/p/7907241.html2环境架设http://www.cn ...
- 记录：使用rpm安装JDK
从这个地址下载rpm文件http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk8-downloads-2133151-zhs.ht ...
- 原生js写ajax请求（复习）
今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还 ...