端口 cti java erro 链式 三种 tag 滚动
相关知识点:
- - 选择器 - .prop $('#tb: checkbox').prop('checked');获取值$('#tb: checkbox').prop('checked', true);设置值 - .each jQuery方法内置循环:$('#tb: checkbox').xxxx
- - $('#tb: checkbox').each(function(k) {
- // k当前索引
- // this,DOM,当前循环的元素 $(this)
- }) - 三元运算
- var v = 条件 ? 真值: 假值
- <body>
- <input type="button" value="全选" onclick="checkAll();" />
- <input type="button" value="反选" onclick="reverseAll();" />
- <input type="button" value="取消" onclick="cancelAll();" />
- <table border="1">
- <thead>
- <tr>
- <th>
- 选项
- </th>
- <th>
- IP
- </th>
- <th>
- PORT
- </th>
- </tr>
- </thead>
- <tbody id="tb">
- <tr>
- <td>
- <input type="checkbox" />
- </td>
- <td>
- 1.1.1.1
- </td>
- <td>
- 80
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" />
- </td>
- <td>
- 1.1.1.1
- </td>
- <td>
- 80
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" />
- </td>
- <td>
- 1.1.1.1
- </td>
- <td>
- 80
- </td>
- </tr>
- </tbody>
- </table>
- <script src="jquery-1.12.4.js">
- </script>
- <script>
- function checkAll() {
- $('#tb: checkbox').prop('checked', true);
- } // .prop 专门对checked操作
- function cancelAll() {
- $('#tb: checkbox').prop('checked', false);
- }
- function reverseAll() {
- $(': checkbox').each(function(k) { // .each 循环选中的每一个元素
- /* Dom实现
- if(this.checked){
- this.checked = false;
- }else{
- this.checked = true;
- } */
- // this,代指当前循环的每一个元素;三元运算var v = 条件? 真值:假值
- var v = $(this).prop('checked') ? false: true;
- // console.log(k,this);
- $(this).prop('checked', v);
- })
- }
- </script>
- </body>
筛选器:
- $('#i1').next() // 下一个
- $('#i1').prev() //往上找
- $('#i1').nextAll() // 下面所有
- $('#i1').prevAll() $('#i1').nextUntil('#ii1') // 下面直到哪里
- $('#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)
添加移除样式:
- $('#i1').addClass(..) // 添加样式
- $('#i1').removeClass(..) // 移除样式
示例:
- <head>
- <style>
- .header{ background-color: royalblue; } .content{ min-height: 70px; }
- .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); .next 获取某个标签的下一个标签
- // $(this).next().removeClass('hide'); 移除hide属性
- // $(this).parent().siblings().find('.content').addClass('hide')
- $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
- // 链式编程
- })
- </script>
- </body>
- $(..).text() // 获取文本内容
- $(..).text("1") // 设置文本内容
- $(..).html() // 获取
- $(..).html("1") // 设置
- $(..).val() // 获取
- $(..).val(..) // 设置
- addClass removeClass toggleClass比如实现网页开关灯功能
开关灯示例:
- <head>
- <style>
- .hide{ display: none; }
- </style>
- </head>
- <body>
- <input type='checkbox' id='i2' />
- <input id="i1" type="button" value="开关" />
- <div class="c1 hide">
- asdfasdf
- </div>
- <script src="jquery-1.12.4.js">
- </script>
- <script>
- $('#i1').click(function() {
- // if($('.c1').hasClass('hide')){
- // $('.c1').removeClass('hide');
- // }else{
- // $('.c1').addClass('hide');
- // }
- $('.c1').toggleClass('hide'); // 一句搞定
- })
- </script>
- </body>
- // 专门用于做自定义属性
- $(..).attr('n') // 获取
- $(..).attr('n', 'v') // 设置
- $(..).removeAttr('n') // 删除
- // 专门用于chekbox,radio jQuery1、2版本checkbox使用attr的话有bug,所以用prop
- $(..).prop('checked') $(..).prop('checked', true)
- append // 往后加
- prepend // 往前加
- after // 紧挨着后面
- before // 紧挨着前面
- remove // 删除
- empty // 只清空内容
- clone // 克隆一份数据
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%;
- width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color:
- #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right:
- 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; }
- </style>
- </head>
- <body>
- <a onclick="addElement();">
- 添加
- </a>
- <table border="1" id="tb">
- <tr>
- <td target="hostname">
- 1.1.1.11
- </td>
- <td target="port">
- 80
- </td>
- <td target="ip">
- 80
- </td>
- <td>
- <a class="edit">
- 编辑
- </a>
- |
- <a class="del">
- 删除
- </a>
- </td>
- </tr>
- <tr>
- <td target="hostname">
- 1.1.1.12
- </td>
- <td target="port">
- 80
- </td>
- <td target="ip">
- 80
- </td>
- <td>
- <a class="edit">
- 编辑
- </a>
- |
- <a class="del">
- 删除
- </a>
- </td>
- </tr>
- <tr>
- <td target="hostname">
- 1.1.1.13
- </td>
- <td target="port">
- 80
- </td>
- <td target="ip">
- 80
- </td>
- <td>
- <a class="edit">
- 编辑
- </a>
- |
- <a class="del">
- 删除
- </a>
- </td>
- </tr>
- </table>
- <div class="modal hide">
- <div>
- <input name="hostname" type="text" />
- <input name="port" type="text" />
- <input name="ip" type="text" />
- </div>
- <div>
- <input type="button" value="取消" onclick="cancelModal();" />
- <input type="button" value="确定" onclick="confirmModal();" />
- </div>
- </div>
- <div class="shadow hide">
- </div>
- <script src="jquery-1.12.4.js">
- </script>
- <script>
- $('.del').click(function() {
- $(this).parent().parent().remove();
- });
- function confirmModal() {
- var tr = document.createElement('tr');
- var td1 = document.createElement('td');
- td1.innerHTML = "11.11.11.11";
- var td2 = document.createElement('td');
- td2.innerHTML = "8001";
- $(tr).append(td1);
- $(tr).append(td2);
- $('#tb').append(tr);
- $(".modal,.shadow").addClass('hide');
- }
- function addElement() {
- $(".modal,.shadow").removeClass('hide');
- }
- function cancelModal() {
- $(".modal,.shadow").addClass('hide');
- $('.modal input[type = "text"]').val("");
- }
- $('.edit').click(function() {
- $(".modal,.shadow").removeClass('hide');
- // this
- var tds = $(this).parent().prevAll();
- tds.each(function() {
- // 获取td的target属性值
- var n = $(this).attr('target');
- // 获取td中的内容
- var text = $(this).text();
- var a1 = '.modal input[name = "';
- var a2 = '"]';
- var temp = a1 + n + a2;
- $(temp).val(text);
- });
- // var port = $(tds[0]).text();
- // var host = $(tds[1]).text();
- //
- // $('.modal input[name="hostname"]').val(host);
- // $('.modal input[name="port"]').val(port);
- // 循环获取tds中内容
- // 获取 <td>内容</td> 获取中间的内容
- // 赋值给input标签中的value
- });
- </script>
- </body>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee;
- line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{
- float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer;
- } .content{ min-height: 100px; border: 1px solid #eeeeee; }
- </style>
- </head>
- <body>
- <div style="width: 700px;margin:0 auto">
- <div class="menu">
- <div class="menu-item active" a="1">
- 菜单一
- </div>
- <div class="menu-item" a="2">
- 菜单二
- </div>
- <div class="menu-item" a="3">
- 菜单三
- </div>
- </div>
- <div class="content">
- <div b="1">
- 内容一
- </div>
- <div class="hide" b="2">
- 内容二
- </div>
- <div class="hide" b="3">
- 内容三
- </div>
- </div>
- </div>
- <script src="jquery-1.12.4.js">
- </script>
- <script>
- $('.menu - item').click(function() {
- $(this).addClass('active').siblings().removeClass('active');
- var target = $(this).attr('a');
- $('.content').children("[b='" + target + "']").removeClass('hide').siblings().addClass('hide');
- });
- </script>
- </body>
- </html>
上面是通过自定义属性实现的,下面不用自定义属性,用索引也能实现。
index 获取索引位置
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee;
- line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{
- float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer;
- } .content{ min-height: 100px; border: 1px solid #eeeeee; }
- </style>
- </head>
- <body>
- <div style="width: 700px;margin:0 auto">
- <div class="menu">
- <div class="menu-item active">
- 菜单一
- </div>
- <div class="menu-item">
- 菜单二
- </div>
- <div class="menu-item">
- 菜单三
- </div>
- </div>
- <div class="content">
- <div>
- 内容一
- </div>
- <div class="hide">
- 内容二
- </div>
- <div class="hide">
- 内容三
- </div>
- </div>
- </div>
- <script src="jquery-1.12.4.js">
- </script>
- <script>
- $('.menu - item').click(function() {
- $(this).addClass('active').siblings().removeClass('active');
- $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
- });
- </script>
- </body>
- </html>
Query css 处理操作
- $('t1').css('样式名称', '样式值')点赞: - $('t1').append() - $('t1').remove() - setInterval - 透明度1》0 - position - 字体大小,位置
点赞示例
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position:
- relative; width: 30px; }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="item">
- <span>
- 赞
- </span>
- </div>
- </div>
- <div class="container">
- <div class="item">
- <span>
- 赞
- </span>
- </div>
- </div>
- <script src="jquery-1.12.4.js">
- </script>
- <script>
- $('.item').click(function() {
- AddFavor(this);
- });
- function AddFavor(self) {
- // DOM对象
- var fontSize = 15;
- var top = 0;
- var right = 0;
- var opacity = 1;
- var tag = document.createElement('span');
- $(tag).text(' + 1');
- $(tag).css('color', 'green');
- $(tag).css('position', 'absolute');
- $(tag).css('fontSize', fontSize + "px");
- $(tag).css('right', right + "px");
- $(tag).css('top', top + 'px');
- $(tag).css('opacity', opacity);
- $(self).append(tag);
- var obj = setInterval(function() {
- fontSize = fontSize + 10;
- top = top - 10;
- right = right - 10;
- opacity = opacity - 0.1;
- $(tag).css('fontSize', fontSize + "px");
- $(tag).css('right', right + "px");
- $(tag).css('top', top + 'px');
- $(tag).css('opacity', opacity);
- if (opacity < 0) {
- clearInterval(obj);
- $(tag).remove();
- }
- },
- 40);
- }
- </script>
- </body>
- </html>
- $(window).scrollTop() // 获取windows滑轮位置 // 注意是谁的滑轮
- $(window).scrollTop(0) // 设置windows滑轮位置
- scrollLeft([val]) // 左右滚动滑轮设置
- $('#i1').offset() // 获取标签位置
- offset().left // 指定标签在html中的坐标位置
- offset().top // 指定标签在html中的坐标位置
- // 纯高度,边框,外边距,内边距
- $('i1').height() // 获取标签的高度 纯高度
- $('i1').innerHeight() // 获取自身高度+padding;
- $('i1').outerHeight() // 参数:false-->获取自身高度+padding+border;
- $('i1').outerHeight(true) // 获取自身高度+padding+border+margin;
注意这里直接使用 #title 方式不是太好。
- <body>
- <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
- <div id="title" style="background-color: black;height: 40px;">
- </div>
- <div style="height: 300px;">
- </div>
- </div>
- <script type="text/javascript" src="jquery-1.12.4.js">
- </script>
- <script>
- $(function() {
- $('#title').mouseover(function() {
- $(this).css('cursor', 'move');
- });
- $("#title").mousedown(function(e) {
- //console.log($(this).offset());
- var _event = e || window.event;
- var ord_x = _event.clientX;
- var ord_y = _event.clientY;
- var parent_left = $(this).parent().offset().left;
- var parent_top = $(this).parent().offset().top;
- $('#title').on('mousemove',
- function(e) {
- var _new_event = e || window.event;
- var new_x = _new_event.clientX;
- var new_y = _new_event.clientY;
- var x = parent_left + (new_x - ord_x);
- var y = parent_top + (new_y - ord_y);
- $(this).parent().css('left', x + 'px');
- $(this).parent().css('top', y + 'px');
- })
- });
- $("#title").mouseup(function() {
- $("#title").off('mousemove');
- });
- })
- </script>
- </body>
- // 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() {})
- 1
- 2
- $('#a1').click(function() {
- var v = $('#t1').val();
- var temp = "
- " + v + "
- ";
- $('#u1').append(temp);
- });
- // 第三种绑定方式
- $('ul').delegate('li', 'click',
- function() {
- var v = $(this).text();
- alert(v);
- })
- // 第一种绑定方式
- // $('ul li').click(function () {
- // var v = $(this).text();
- // alert(v);
- // })
- // 第二种绑定方式
- // $('ul li').bind('click',function () {
- // var v = $(this).text();
- // alert(v);
- // })
- // 第四种绑定方式
- // $('ul li').on('click', function () {
- // var v = $(this).text();
- // alert(v);
- // })
a 标签是不是默认有个 onclick 事件,如果再给绑定一个 onclick 事件会怎么样?
默认:先执行绑定事件,在执行 a 标签的默认事件。
- 阻止事件发生
- return false#当页面框架加载完成之后,自动执行$(function() {
- $(...)
- })
示例:
- <body>
- <!--Dom方式:onclick里需要加return-->
- <a onclick="return ClickOn()" href="http://www.oldboyedu.com">
- 走你1
- </a>
- <!--jQuery方式:-->
- <a id="i1" href="http://www.oldboyedu.com">
- 走你2
- </a>
- <script src="jquery-1.12.4.js">
- </script>
- <script>
- // Dom方式:
- function ClickOn() {
- alert(123);
- return true; // true:执行后面操作,dom绑定里需要加return
- }
- // jQuery方式:
- $('#i1').click(function() {
- alert(456);
- return false; // false:不执行后面操作
- })
- </script>
- </body>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .error{ color: red; }
- </style>
- </head>
- <body>
- <!--功能:输入值:运行提交;未输入:不允许提交-->
- <form id="f1" action="s5.html" method="POST">
- <div>
- <input name="n1" tex="用户名" type="text" />
- </div>
- <div>
- <input name="n2" tex="密码" type="password" />
- </div>
- <div>
- <input name="n3" tex="邮箱" type="text" />
- </div>
- <div>
- <input name="n4" tex="端口" type="text" />
- </div>
- <div>
- <input name="n5" tex="IP" type="text" />
- </div>
- <input type="submit" value="提交" />
- <!--<img src="...">-->
- </form>
- <script src="jquery-1.12.4.js">
- </script>
- <script>
- // // 当页面框架加载完毕后,自动执行,比如加载图片,框加载后,图片还没加载,函数就执行了
- // $(function(){
- //
- // });
- $(function() {
- // 当页面所有元素完全加载完毕后,执行
- $(': submit').click(function() {
- $('.error').remove(); // 先清空错误样式
- var flag = true; // 创建局部变量
- $('#f1').find('input[type = "text"], input[type = "password"]').each(function() {
- var v = $(this).val();
- var n = $(this).attr('tex');
- if (v.length <= 0) {
- flag = false;
- var tag = document.createElement('span');
- tag.className = "error";
- tag.innerHTML = n + "必填";
- $(this).after(tag);
- // return false; // 加上false后,第一个不合法,后面不通过
- }
- });
- return flag;
- });
- });
- // $(':submit').click(function () {
- // var v = $(this).prev().val();
- // if(v.length > 0){
- // return true;
- // }else{
- // alert('请输入内容');
- // return false
- // }
- // })
- </script>
- </body>
- </html>
前端武器库之 jQuery 示例
来源: http://www.bubuko.com/infodetail-2166362.html