目录:

  一、jQuery

内容:

  一、jQuery:

  ps:版本

   1.xx (推荐最新版本,兼容性好)

   2.xx

   3.xx

    转换:

    jQuery对象[0]   =>  DOM对象

    $(DOM对象)    =>  jQuery对象

  1、查找元素

    基本:

    1、id   $('#id')

      2、class $('.classname')

    3、a标签  $('a')

      4、$(''a,.c2',#i10)  表示同时拿到所有的a标签、class=c2的标签和id=i10的标签

      层级:

    $('#i10 a') 表示找到id=10里的所有a标签,不论层级多少都能找到

      $('#i10>a') 表示找到id=i10后,只找到它的child的a标签

      $('#i10+a') 表示找到id=i 10后,找到它的下一个兄弟的a标签

      $('#i10~a') 表示找到id=i 10后,找到它的上一个兄弟的a标签

      基本筛选器:

      :first

      :last

      :eq() 索引值,从零开始

      :not()

      :even  奇数行

      :odd   偶数行

      :gt()

      :lt()

      :header 匹配 h1~h6的标题元素

      查找: 

        next() 下一个标签

        prev()上一个标签

        parent()父标签

        children()所有的孩子标签

        siblings()所有的兄弟标签

        find() 查找所有的内容

        nextAll()

        nextUntil()

        prevAll()

        prevUntil()

        parents()

        parentsUntil()

        eq()

        first()

        last()

        hasClass()

        

      属性:

      $('[属性]')   具有所有该属性的标签

      $('[属性=“值”]') 所有有该属性对应该值的标签

      例子:

      $("input[type='text']")  查找input标签里type等于text的标签

      例子:多选、反选、取消实例

<!--实例:-->
<!--多选/反选/全选-->
<!-- -选择器-->
<!-- -$(this).prop('checked') 获取值-->
<!-- -$(this).prop('checked',false) 设置值-->
<!-- -jQuery方法内置循环:$('[type="checkbox"]').prop('checked',true);-->
<!-- -var v = 条件? 真值:假值-->
<!-- -$('[type="checkbox"]').each(function () {-->
<!--var v = $(this).prop('checked')?false:true;//三元运算-->
<!--$(this).prop('checked',v)-->
<!--})-->
<!--} this表示DOM元素-->
<!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="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody>
<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>
<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(){
$('[type="checkbox"]').prop('checked',true);
}
function cancelAll(){
$('[type=checkbox]').prop('checked',false);
}
function reverseAll(){
$('[type="checkbox"]').each(function () {
//this 代指当前循环的每一个元素
//反选
//DOM方式
// if(this.checked){
// this.checked = false;
// }else{
// this.checked = true;
// }
//jQuery方式
// if($(this).prop('checked')){//prop传递一个参数表示获取状态值
// $(this).prop('checked',false);//prop传递两个参数表示设置值
// }else{
// $(this).prop('checked',true);
// }
var v = $(this).prop('checked')?false:true;//三元运算
$(this).prop('checked',v)
})
}
</script>
</body>
</html>

         例子:左侧边框显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color:black;
color:white;
}
.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">标题1</div>
<div class="content ">内容</div>
</div>
<div class="item">
<div class="header">标题2</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题3</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function(){
//$(this)表示当前点击的标签
//获取该标签的上一级标签,找到它上一级标签的兄弟标签
//添加样式和移除样式
// $(this).parent().siblings().find('.content').addClass('hide');
// $(this).next().removeClass('hide');
//链式编程
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
})//把所有class=header都绑定onclick事件
</script>
</body>
</html>

  2、操作元素

      文本操作:

      text()获取内容   ()里加参数是设置文本内容,如果包含标签html不解析

      html()  获取标签   ()力加参数是设置内容,包含标签自动解析

      val()获取input  select  textarea中标签

      例子:  

      模态对话框,使用jQuery实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.shadow{
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
opacity: 0.6;
z-index:9;
background-color:black;
}
.addcontent{
position:fixed;
top:50%;
left:50%;
width:500px;
height:400px;
margin-top:-250px;
margin-left:-200px;
z-index:10;
background-color:white;
}
</style>
</head>
<body>
<div id='add1' border="1">添加</div>
<table border="1">
<thead>
<tr>
<th>IP</th>
<th>PORT</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>80</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>80</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
</tbody>
<div class="shadow hide"></div>
<div class="addcontent hide">
<div><input name='hostname' type="text"/></div>
<div><input name='port' type="text"/></div>
<div><input type="button" value="确定"/><input class='c1' type="button" value="取消"/></div>
</div>
</table>
<script src="jquery-1.12.4.js"></script>
<script >
$('#add1').click(function(){
$('.shadow').removeClass('hide').next().removeClass('hide');
$('.addcontent input[type="text"]').val(''); });
$('.c1').click(function(){
$(".shadow").addClass('hide').next().addClass('hide');
});
$('.edit').click(function() {
$('.shadow').removeClass('hide').next().removeClass('hide');
var port = $($(this).prevAll()[0]).text();
var ip = $($(this).prevAll()[1]).text();
console.log($('.addcontent input[name="hostname"]').val('123'))
$('.addcontent input[name="hostname"]').val(ip);
$('.addcontent input[name="port"]').val(port);
}); </script>
</body>
</html>

      样式操作:

      addClass()

      removeClass()

      toggleClass()自动判断括号内class是否存在,如果存在就删除,如果不存在就添加

      例子:

      开关

    

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input id='i1' type="button" value="开关"/>
<div class="c1">aaaaaa</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function(){
$('.c1').toggleClass('hide')
})
</script>
</body>
</html>

      

      属性操作:

      #专门用于做自定义属性

      .attr():           attr('属性名')   获取属性名称对应的属性     .attr('name', 'gavin')  传两个参数表示设置值

      removeAttr(‘属性名’): 删除属性

      #专门用于checkbox,radio操作

      .prop

      例子:增强版模态对话框(可以任意添加属性值)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.shadow{
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
opacity: 0.6;
z-index:9;
background-color:black;
}
.addcontent{
position:fixed;
top:50%;
left:50%;
width:500px;
height:400px;
margin-top:-250px;
margin-left:-200px;
z-index:10;
background-color:white;
}
</style>
</head>
<body>
<div id='add1' border="1">添加</div>
<table border="1">
<thead>
<tr>
<th>IP</th>
<th>PORT</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td target="name">a</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="port">80</td>
<td target="name">b</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
<tr>
<td target="hostname">1.1.1.3</td>
<td target="port">80</td>
<td target="name">c</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
</tbody>
<div class="shadow hide"></div>
<div class="addcontent hide">
<div><input name='hostname' type="text"/></div>
<div><input name='port' type="text"/></div>
<div><input name='name' type="text"/></div>
<div><input type="button" value="确定"/><input class='c1' type="button" value="取消"/></div>
</div>
</table>
<script src="jquery-1.12.4.js"></script>
<script >
$('#add1').click(function(){
$('.shadow').removeClass('hide').next().removeClass('hide');
$('.addcontent input[type="text"]').val(''); });
$('.c1').click(function(){
$(".shadow").addClass('hide').next().addClass('hide');
});
$('.edit').click(function() {
$('.shadow').removeClass('hide').next().removeClass('hide');
$(this).prevAll().each(function(){
var tap = $(this).attr('target');
var text = $(this).text();
$('.addcontent input[name="' + tap + '"]').val(text);
})
}); </script>
</body>
</html>

      

      index() 获取索引位置

      eq($(this).index()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
line-height:38px;
background-color:#eeeeee;
border-bottom:1px solid #dddddd; }
.menu .menu-item{
float:left;
border-right:1px solid red;
padding:0 20px;
cursor:pointer; }
.content{
min-height:100px;
border:1px solid #dddddd;
}
.active{
background-color:green;
}
</style>
</head>
<body>
<div style="width:700px;margin:0 auto;">
<div class="menu">
<div class="menu-item ">菜单1</div>
<div class="menu-item ">菜单2</div>
<div class="menu-item ">菜单3</div>
<div style="clear:both"></div>
</div>
<div class="content">
<div class="cotent-item ">内容1</div>
<div class="cotent-item hide">内容2</div>
<div class="cotent-item hide">内容3</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>

      文档处理:

      append 添加到最后一个位置

      prepend 添加到第一个位置

      after  添加到元素的后面

      before 添加到元素的前面

      remove 删除样式和内容

      empty  只删除内容, 不删除样式

      clone  复制选定的内容

      例子:模态对话框的删除功能:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.hide{
display:none;
}
.shadow{
position: fixed;
top:0;
right:0;
left:0;
bottom:0;
background-color:black;
opacity: 0.6;
z-index: 9;
}
.menu{
position:fixed;
top:50%;
left:50%;
background-color:#eeeeee;
width:400px;
height:500px;
margin-top:-250px;
margin-left:-200px;
z-index:10;
} </style>
</head>
<body>
<a id="add">添加</a>
<table border="1">
<thead>
<tr>
<th >IP</th>
<th >Port</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td target="hostname">1.1.1.1</td>
<td target="hostname">80</td>
<td><a class="edit">编辑</a> | <a class="del">删除</a></td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="port">80</td>
<td><a class="edit">编辑</a> | <a class="del">删除</a></td>
</tr>
<tr>
<td target="hostname">1.1.1.3</td>
<td target="port">80</td>
<td><a class="edit">编辑</a> | <a class="del">删除</a></td>
</tr>
</tbody>
</table>
<div>
<div class="menu hide">
<input target="hostname" type="text"/>
<input target="port" type="text"/>
<div>
<input id="remove" type="button" value="取消"/>
</div>
</div> </div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$("#add").click(function(){
$('.menu, .shadow').removeClass('hide');
$('.menu input[type="text"]').val("")
});
$('#remove').click(function(){
$('.menu, .shadow').addClass('hide');
});
$('.edit').click(function(){
$('.menu, .shadow').removeClass('hide');
var tds = $(this).parent().prevAll();
tds.each(function(){
var target = $(this).attr('target');
var value = $(this).text();
$('.menu input[target="'+target+'"]').val(value);
});
});
$('.del').click(function () {
$(this).parent().parent().remove();
})
</script>
</body>
</html>

      css处理:

      $('t1').css('样式名称',‘样式值’)

      例子:点赞功能

        知识点:

        - $().append()

        - setInterval()

        - 透明度 1---> 0

        - position

        - 字体大小,位置

        -clearInterval

        -setInterval

        -remove

      

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点赞</title>
<style>
.container{
padding:50px;
border:1px solid #dddddd;
}
.item{
position:relative;
width:48px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<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('top',top + 'px');
$(tag).css('right',right+ 'px');
$(tag).css('opacity',opacity);
$(self).append(tag); var obj = setInterval(function(){
fontSize += 10;
top -= 10;
right -= 10;
opacity -= 0.1;
$(tag).css('fontDSize',fontSize + 'px');
$(tag).css('right',right + 'px');
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
} },100)
}
</script>
</body>
</html>

        位置:

        scrollTop()  不加值表示获取

        scrollTop(值) 表示设置

        scrollLeft()

        offset    指定标签在文档中的坐标

        offset().top    offset().left  指定标签的横纵坐标

        position() 指定标签相对父标签(relative)的坐标

        height()获取标签的高度,只能看到纯高度

        innerHeight() 只获取边框+纯高度

        outerHeight() 获取边框+ 纯高度+边距

        outerHeight(true)

        #纯高度、边框、外边距、内边距

        

        绑定事件:

          click() 等操作

          bind('click',function(){})

          unbind('click',function(){})

          delegate('a','click', function(){})    委托方式

          undelegate('a','click', function(){})  委托方式

          on('click', function(){})

          off('click',function(){})

          

        绑定事件的问题:

        默认情况下,需要在所有元素都加载完毕后才执行js操作,例如当执行js时,如果上述有图片之类需要加载,需要在等图片加载完毕后,才能执行js操作,在图片加载过程中,其实事件已经可以操作,所以在js中,可以变为当页面框架加载完毕后,自动执行:

        操作方式:

        <script>

        $(function(){});将执行的操作放入该匿名函数中,可以保证在页面框架加载完毕后就开始执行操作

        </script>

       

      

        jQuery扩展:

        - $.extend        $.方法

        - $.fn.extend     $(变量).方法   

        自己写的时候需要写成自执行函数

        (function(arg){

          //使用该方式引入可以封装其他人在定义时的全局变量

          var status =1;

          arg.extend({

          'function_name': function(){

            return 'XXX';

          })

          })(jQuery);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery扩展</title>
</head>
<body> <script src="jquery-1.12.4.js"></script>
<script src="plugin1.js"></script>
<script>
//通过文件方式调用
var v = $.wangsen();
alert(v);
//调用方式1
// $.extend({
// 'wangsen':function(){
// return 'sb';
// }
// });
// var v = $.wangsen();
// alert(v); //调用方式2:
// $.fn.extend({
// 'hanyang': function(){
// return 'db';
// }
// });
// var v = $('#i1').hanyang();
// alert(v); </script>
</body>
</html>

网页

status = 1;

$.extend({
'wangsen': function () {
return 'sb';
}
});

plugin1.js

Python学习笔记第十七周的更多相关文章

  1. Python学习笔记第二十七周(Bootstrap)

    目录: 全局样式 一.栅格系统 二.表单 三.按钮  四.导航 五.按钮组 六.面板 七.表格 八.分页 九.排版 十.图片 十一.辅助类 十二.响应式工具 组件 内容: 前言: 首先通过https: ...

  2. Python学习笔记第五周

    目录 一.基础概念 1.模块定义 2.包的定义 3.导入包的本质 4.导入模块的本质 5.导入方法 6.import的本质 7.导入优化 8.模块分类 9.标准库介绍 1.time与datetime ...

  3. Python学习笔记整理(十七)异常处理

    一.异常基础 try/except:捕捉由代码中的异常并恢复,匹配except里面的错误,并自行except中定义的代码,后继续执行程序(发生异常后,由except捕捉到异常后,不会中断程序,继续执行 ...

  4. Python学习笔记第二十三周(Flask架构)

    目录: 一.变量引用 内容: 备注:PyCharm小技巧,comm+alt+l  自动修改格式,comm+alt+return  向上添加新行 一.变量引用 1.url生成 from flask im ...

  5. Python学习笔记第十一周

    目录: 1.RabbitMQ   2.Redis  内容: 1.RabbitMQ 实现简单的队列通信 send端 import pika credentials = pika.PlainCredent ...

  6. Python学习笔记第十周

    目录: 一.基础概念 1.多进程 2.进程间通信 3.进程锁 4.进程池 5.协程 a) greenlet b) Gevent 6.论事件驱动与异步IO 7.IO多路复用 8.Python Selec ...

  7. Python学习笔记第八周

    目录: 一.基础概念 1.动态导入模块 2.断言机制 3.SocketServer 二.作业 FTP服务器 三.单独注明 1.类中装饰器 2.进度条 一.基础概念 1.动态导入模块 有时在编程过程中, ...

  8. Python学习笔记第七周

    目录: 1.静态方法 @staticmethod 2.类方法    @classmethod 3.属性方法  @property 4.类的特殊成员方法 a) __doc__表示类的描述信息 b) __ ...

  9. Python学习笔记第六周

    目录 一.基础概念 面向对象编程 1.面向对象的几个核心特点 1.class类 2.object对象 3.encapsulation封装 4.inheritance继承 5.polymorphism多 ...

随机推荐

  1. Oracle传输表空间介绍

    传输表空间通过拷贝数据文件的方式,实现可跨平台的数据迁移,效率远超expdp/impdp, exp/imp等工具.还可以应用跨平台&数据库版本迁移表数据.归档历史数据和实现表空间级时间点数据恢 ...

  2. Github 指令上手 --- 分支

    指令环境 Git Shell 1.创建一个新分支 git branch branchName 2.切换到新创建的分支 git checkout branchName 1.2合起来使用指令(创建并切换) ...

  3. java.sql.SQLException: Parameter index out of range (1 > number of parameters, which is 0).

    java.sql.SQLException: Parameter index out of range (1 > number of parameters, which is 0). at co ...

  4. noip2017奶酪

    题目描述 现有一块大奶酪,它的高度为 h,它的长度和宽度我们可以认为是无限大的,奶酪 中间有许多 半径相同 的球形空洞.我们可以在这块奶酪中建立空间坐标系,在坐标系中, 奶酪的下表面为z=0,奶酪的上 ...

  5. Java四个常用正则表达

     1.查询   以下是代码片段: String str="abc efg ABC";String regEx="a|f"; //表示a或fPattern p=P ...

  6. C++11新特性,bind,基于对象

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  7. Androi开发 ---Fragment片段布局案例

    效果图: 1.MainActivity.java package com.example.android_activity; import android.app.Activity; import a ...

  8. Java基础-常用工具类(一)

    object类 Object 类是所有类的的父类,如果一个类没有明确使用EXPENTS关键字明确标识继承另外一个类,那么这个类默认继承object类,oject类中的方法适合所有子类 1)toStri ...

  9. 分布式ID设计方案

    分布式ID的定义: 全局唯一 有序性 有意义 高可用 紧凑性 序列号的可预测性 方案1:使用数据库递增的顺序 最常见的方式.利用数据库,全数据库唯一. 优点: 1)简单,代码方便,性能可以接受. 2) ...

  10. redis 解析配置文件

    在redis安装文件夹里面有redis.conf,查看配置. 一:基础配置介绍 1.units(单位) --这里可以看到 1k和1kb是不一样的,  units 这里单位是不区分大小写的,are al ...