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(标准通用标记语言的一个子集) ...
随机推荐
- mysql zip 版安装
http://jingyan.baidu.com/article/8cdccae946133f315513cd6a.html
- Python 项目实践三（Web应用程序）第四篇
接着上节继续学习,本章将建立用户账户 Web应用程序的核心是让任何用户都能够注册账户并能够使用它,不管用户身处何方.在本章中,你将创建一些表单,让用户能够添加主题和条目,以及编辑既有的条目.你还将学习 ...
- 【转】教你开发jQuery插件
阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblo ...
- 4、公司经营的业务来源 - CEO之公司管理经验谈
公司经营的业务来源为公司的运作资金提供了帮助,一般来说,整个公司的领导层为公司的经营做管理,而业务员就为公司的业务提供来源,然后建设部为业务开展做建设. 一.总经理: 公司的总经理主要负责公司运作经营 ...
- mysql 的 fiter push down 优化
出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该声明. ...
- Centos 7 防火墙firewalld命令
今天自己在Hyper-v下搭建三台Linux服务器集群,用于学习ELKstack(即大数据日志解决技术栈Elasticsearch,Logstash,Kibana的简称),下载的Linux版本为cen ...
- S2 深入.NET和C#编程 三：使用集合组织相关数据
三:使用集合组织相关数据 集合概念: ArrayList:非常类似于数组,也有人称他为数组的列表.ArrayList可以动态维护,数组的容量是固定的 和数组类似,ArrayList中存储的是数据成为元 ...
- Robot Framework学习笔记（十一）------ 分层设计
以百度搜索为例,如果我们需要写5个不同关键字搜索的用例.如果没有分层的思想,那么我们需要写5个用例,并且每个用例都需要重复写打开浏览器.输入关键字.点击按钮.关闭浏览器的步骤.如果使用Robot Fr ...
- python基础(四)字符串处理
字符串处理 msg = 'my name is sylar' capitalize方法,将字符串的首字母大写 print 'capitalize方法:', msg.capitalize() swapc ...
- Java学习笔记15（面向对象八：匿名对象、内部类）
匿名对象: 是指创建对象的时候,只有创建对象的语句,却没有把对象地址值赋给某个变量 创建一个普通对象: Person p = new Person(); 创建一个匿名对象: new Person(); ...