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']")
$(':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')

$('#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')

# 专门用于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 ...

随机推荐

IOS 多文件上传 Java web端（后台）使用List<MultipartFile> 接收出现的问题
先上正确的示例: 主要是设置我们的request的content-type为multipart/form-data NSDictionary *param = @{@"assignee&qu ...
dubbo-admin管理控制台的安装部署(最简单)
Dubbo-admin最简单的安装部署,十分钟就能搞定! 网上找的安装教程虽说详细,但是就是因为详细操作起来而显得繁琐.今天,我帮大家跳过这些繁琐的步骤,简单快捷的安装部署dubbo-admin. 1 ...
[20180627]测试bbed是否支持管道命令.txt
[20180627]测试bbed是否支持管道命令.txt --//测试bbed是否支持管道命令.txt 1.环境:SCOTT@test01p> @ ver1PORT_STRING ...
asp.net mvc5中的过滤器重写
asp.net mvc5中增加了一种过滤器类型叫过滤器重写,这种过滤器类型可以在操作或者控制器上忽略更高层次上设置的过滤器类型,它可以重写五种基本的过滤器接口类型:IAuthenticationFil ...
word中从正文开始编码的方法
假如第1页和第2页是首页和目录,你想从第3页的正文开始设置页码 1. 将光标移到第二页的最后位置,点击插入“分隔符”,选择“分节类型”的“下一页”,确定.这时光标自动移到第三页. 2. 点击插入页码, ...
Ubuntu下matplotlib的中文显示
真真地被matplotlib的中文显示折磨的不行了.简要记下解决方案,防止以后重新配又是蛋疼菊紧. 我的环境:系统是Ubuntu 13.04,Python是系统自带的,matplotlib是apt安装 ...
Hacker News API
Hacker News API中的URI和版本 API都由https://hacker-news.firebaseio.com提供. 单个条目信息故事,评论,招聘,问答,以及投票都叫做条目.它们有各 ...
【PAT】B1036 跟奥巴马一起编程(15)（15 分
#include<stdio.h> int main() { int row,col; char c; scanf("%d %c",&col,&c); ...
Linux之删除带有空格的文件（而不是目录）
大家平时工作中对不带空格的文件接触较多.这样一来删除操作也是比较简单的.但是有时我们会接触带有空格的文件.对于这种文件我们应该如何删除呢? 首先我们演示一下find命令结合xargs命令删除不带空格的 ...
Hbase-2.0.0_02_常用操作
主要是常用的hbase shell命令,包括表的创建与删除,表数据的增删查[hbase没有修改]:以及hbase的导出与导入. 参考教程:HBase教程参考博客:hbase shell基础和常用命令 ...

jQuery与js例子

jQuery与js例子的更多相关文章

随机推荐

热门专题