jQuery与js例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--全选与反选按钮--> <input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();"/> <table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
<!--<td>编辑|删除</td>-->
</tr>
</thead>
<tbody id="tb"> <tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
<td>编辑|删除</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
<td>编辑|删除</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
<td>编辑|删除</td> </tr>
</tbody>
</table> <script src="jquery-1.12.4.js"></script> //引用jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: black;
color: wheat;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height:400px;width: 200px;border: 1px solid #dddddd">
<div class="item">
<div class="header">标题一</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div> <div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function(){
// 当前点击的标签 $(this)
// 获取某个标签的下一个标签
// 获取某个标签的父标签
// 获取所有的兄弟标签
// 添加样式和移除样式
// $('.i1').addClass('hide')
// $('#i1').removeClass('hide')
// var v = $("this + div");
// $("label + input")
// console.log(v);
//
// $("afsldkfja;skjdf;aksdjf") // 筛选器
/*
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
// . . .
//
$('#i1').addClass(..)
$('#i1').removeClass(..)
*/ // 链式编程
// $(...).click(function(){
// this..
// }) // $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide') $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') })
</script>
</body>
</html>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$(':checkbox').each(function(k){
// this,代指当前循环的每一个元素
// Dom
/*
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/
/*
if($(this).prop('checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
*/
// 三元运算var v = 条件? 真值：假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
<script>
function checknoll() {
$('#tb:checkbox').prop('checked',true) }
</script>
</body>
</html>
jQuery
http://jquery.cuishifeng.cn/
模块 《=》类库
DOM/BOM/JavaScript的类库
版本：
1.x 1.12
2.x
3.x
转换：
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)
一、查找元素
DOM
10左右
jQuery：
选择器，直接找到某个或者某类标签
1. id
$('#id')
2. class
<div class='c1'></div>
$(".c1")
3. 标签
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
4. 组合a
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
$('.c2')
$('a,.c2,#i10')
5. 层级
$('#i10 a') 子子孙孙
$('#i10>a') 儿子
6. 基本
:first
:last
:eq()
7. 属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")
$(':text')
实例：
多选，反选，全选
- 选择权
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： $('#tb:checkbox').xxxx
- $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
- var v = 条件 ? 真值 : 假值
筛选
$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')
<div>
<a>asdf</a>
<a>asdf</a>
<a id='i1'>asdf</a>
<a>asdf</a>
<a id='ii1'>asdf</a>
<a>asdf</a>
</div>
$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')
$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil()
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)
文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html()
$(..).html("<a>1</a>")
$(..).val()
$(..).val(..)
样式操作：
addClass
removeClass
toggleClass
属性操作：
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')
<input type='checkbox' id='i1' />
# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)
PS:
index 获取索引位置
文档处理：
append
prepend
after
before
remove
empty
clone
css处理
$('t1').css('样式名称', '样式值')
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
position() 指定标签相对父标签(relative)标签的坐标
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？
# 纯高度，边框，外边距，内边距
事件
DOM： 三种绑定方式
jQuery：
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
*******************
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
jQuery扩展：
- $.extend $.方法
- $.fn.extend $(..).方法
(function(){
var status = 1;
// 封装变量
})(jQuery)
二、操作元素
===》实例：
作业：
一：
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？
# 纯高度，边框，外边距，内边距
二、所有实例敲一遍
三、编辑框
jQuery与js例子的更多相关文章
- jquery:validate的例子
该文档转载自 http://ideabean.javaeye.com/blog/363927 官方网站 http://bassistance.de/jquery-plugins/jquery-plug ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
- jQuery.validationEngine.js学习
项目中使用到了这个插件,抽了个空,看了一下. (function($){ var method ={} $.fn.validationEngine = function(){} $.validatio ...
- jquery.form.js不能解决连接超时（timeout）的解决方法
最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限 ...
- 本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- jQuery.qrcode.js客户端生成二维码，支持中文并且可以生成LOGO
描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较 ...
- jquery.form.js实现将form提交转为ajax方式提交的使用方法
本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...
- jquery.validate.js
jquery.validate.js使用记录 首先到JQ官网下载搜索validate插件,下载相关源码,附上validate官网网址 https://jqueryvalidation.org/ 找到v ...
随机推荐
- cdn原理的理解
今天要做个小笔记,浅谈一下对cdn的一些理解,在工作中我们经常用到cdn代理访问,那他的原理是什么不知道大家有没有考虑过 CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集 ...
- React中props
今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...
- Git应用—05Git文件冲突合并的几种情况(转载)
git文件冲突合并的几种情况 https://xieye.iteye.com/blog/2433229 本文描述了git冲突的几种常见情况和解决方案,老鸟请直接忽略本文.假设冲突文件是 test/Te ...
- Linux 学习笔记之超详细基础linux命令 Part 12
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 11---------------- ...
- 51Testing专访史亮：测试人员在国外
不久前,我接受了51Testing的访问,讨论了软件测试的一些问题.以下是全文. 1.史亮老师,作为我们51Testing的老朋友,能和我们说说您最近在忙些什么吗? 自2011年起,我加入Micros ...
- LeetCode题解之Binary Tree Pruning
1.题目描述 2.问题分析 使用递归 3.代码 TreeNode* pruneTree(TreeNode* root) { if (root == NULL) return NULL; prun(ro ...
- windows10 VM12 安装Mac OS X 10.11
转载自:http://blog.csdn.net/j755ing/article/details/69400439 第一步: 下载 材料/工具: 下载 VMware Workstation 12 Pr ...
- The Tomcat connector configured to listen on port 8080 failed to start. The port may already be in use or the connector may be misconfigured
springboot 8080端口被占用报错:The Tomcat connector configured to listen on port 8080 failed to start. The p ...
- MySQL面试题之如何优化一条有问题的SQL语句？
如何优化一条有问题的sql语句? 针对sql语句的优化.我们可以从如下几个角度去分析 回归到表的设计层面,数据类型选择是否合理 大表碎片的整理是否完善 表的统计信息,是不是准确的 审查表的执行计划,判 ...
- February 10th, 2018 Week 6th Saturday
It is not enough to have a good mind. The main thing is to use it well. 头脑聪明还不够,重要的是好好运用. From Rene ...