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(标准通用标记语言的一个子集) ...
随机推荐
- Java 浅析Thread.join()
概要 本文分为三部分对 Thread.join() 进行分析: 1. join() 的示例和作用 2. join() 源码分析 3. 对网上其他分析 join() 的文章提出疑问 1. join() ...
- python 中一些关键字的区别
一.raw_input 和input input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的 1.当输入为纯数字时 input返回的是数值类型, ...
- 搜索引擎之全文搜索算法功能实现（基于Lucene）
之前做去转盘网的时候,我已经公开了非全文搜索的代码,需要的朋友希望能够前去阅读我的博客.本文主要讨论如何进行全文搜索,由于本人花了很长时间设计了新作:观点,观点对全文搜索的要求还是很高的,所以我又花了 ...
- 初识BASH SHELL
什么是Shell shell翻译成中文就是"壳"的意思.简单来说就是shell是计算机用户与操作系统内核进行"沟通"的一种工具.Windows系统中有power ...
- Python学习_07_错误、异常
地毯式地过语法终于快要结束了... Python中的常见异常 1.NameError:尝试访问一个未初始化的变量 2. ZeroDivisionError:除数为0 3. SyntaxError:Py ...
- spring boot 之fastJson的使用（二）
昨天说了springboot的简单入门程序.今天进一步深入.今天说一下,fastJson的使用.做过springmvc的都知道fastjson.其实boot自带json可是本人用惯了fastjson, ...
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
- 基于JerseyToken安全设计
网上Jersey中文资料不多,更别提其他了.本人跟进项目具体需求弄了简单的api认证机制 基本流程图 后端登录退出代码: @Path("Account") public class ...
- C++继承分析
面向对象的三大特性之一就是继承,继承运行我么重用基类中已经存在的内容,这样就简化了代码的编写工作.继承中有三种继承方式即:public protected private,这三种方式规定了不同的访问权 ...
- 前端学习:html基础学习四
7.HTML表格(主要内容<table><caption><tr><th><td>标记) <table>标记 基本格式 < ...