Python学习笔记Day17 - JQuery

JQuery

http://jquery.cuishifeng.cn/

模块 <<==>> 类库

DOM/BOM/JS类库

  1. 查找元素
  2. 操作元素

  • 版本

    1.x 1.12
    2.x
    3.x

  • 导入

    <script src="jquery-1.12.4.js"></script>
    JQuery.
    $.

  • 转换

    jquery对象[0] => Dom对象
    Dom对象 => $(Dom对象)

选择器，直接找到某个或者某类标签

  1. #id
    $('#id')
  2. .class
    $(".c1")
  3. 标签
    $('a')
  4. 组合
    $('a,.c2,#i10')
  5. 层级
    $('#i10 a') 子子孙孙
    $('#i10>a') 儿子
    $('.c1+.c2') 匹配所有紧接在c1元素后的c2元素(包括子标签)
    $('.c1~.c2') 匹配所有与c1同辈的c2元素
  6. 基本
    i1:first
    i1:last
    i1:eq(index) 索引 从0开始
  7. 属性
    $('[alex]') 具有alex属性的所有标签
    $('[alex="123"]') alex属性等于123的标签
  8. 表单
    $(':text') # 匹配type='text'
    $("input[type='text']") # 利用属性查找代替
    :checkbox
    $(':disabled')
    $(':enabled')
    $(':checked')
    $(':selected')
  9. 值
    $('div:contains("John")') # 查找所有包含 "John" 的 div 元素

实例：多选，反选，全选

  • .prop
    $('#tb :checkbox').prop('checked'); 获取值
    $('#tb :checkbox').prop('checked', true); 设置值
  • .xxxx批量操作
    jQuery方法内置循环： $('#tb :checkbox').xxxx
  • 循环.each
    $('#tb :checkbox').each(function(k){
    // k当前索引 0+
    // this，是DOM对象，当前循环的元素
    if(this.checked){}
    // $(this)，转换为JQuery对象
    if($(this).prop('checked', true)){}
})
  • 三元运算
    var v = 条件 ? 真值 : 假值

筛选器，在选择器的基础上进行筛选

  • 下一个(同级)
    $('#i1').next()
    $('#i1').nextAll()
    $('#i1').nextUntil('#ii1') # 包括ii1
  • 上一个(同级)
    $('#i1').prev()
    $('#i1').prevAll() # 依次向上，第0个 --> 第n个
    $('#i1').prevUntil('#ii1')
  • 父标签
    $('#i1').parent()
    $('#i1').parents()
    $('#i1').parentsUntil()
  • 子标签
    $('#i1').children()
  • 兄弟标签
    $('#i1').siblings()
  • 寻找#i1中class为.c1的
    $('#i1').find('.c1') # JQuery支持链式编程，可不断循环
  • 过滤
    $('li:eq(0)')
    $('li').eq(1) #索引
    first()
    last()
    hasClass(class)

文本操作

$(..).text() # 获取文本内容
$(..).text("1") # 设置文本内容,不解析HTML，当作字符串

$(..).html() # 获取标签
$(..).html("1") # 设置标签

$(..).val() # 查找value属性
$(..).val("...") # 设置value属性

样式操作

.addClass('c1')
.removeClass()
.toggleClass() # 自动判断，有就删，没有就加

属性操作

专门用于自定义属性

$(..).attr('n') # 获取
$(..).attr('n','v') # 设置
$(..).removeAttr('n') # 移除
# 专门用于checkbox,radio选择 如用attr会出现删除后无法重新添加
$(..).prop('checked')
$(..).prop('checked', true)
=利用属性操作替代prev等筛选，便于日后修改=

索引.index

$(..).index() # 获取当前标签在父标签下的索引
$(..).children().eq(v) # 寻找子标签下索引为v的标签

文档处理

.append(tag) # 追加到子标签最后
.prepend() # 追加到子标签最前
.after() # 追加到当前标签后（兄弟）
.before()

删除或复制标签

.remove() # 删除标签 不加参数默认删除所有，加参数.#可进行筛选
.empty('0') # 清空标签内容
.clone # 复制标签内容

css单样式处理，直接在标签style内操作

$('t1').css('样式名称', '样式值')
$('t1').css('样式名称', '') #值为空时删除css属性

点赞功能的实现

- $('t1').append()
- $('t1').remove()
- setInterval 定时器
- 透明度 1 >> 0
- position
- 字体大小，位置

位置

  • 滚动框位置

    $('div').scrollTop()
    $(window).scrollTop() 无参数获取
    $(window).scrollTop(0) 有参数设置
    .scrollLeft([val]) 水平

  • 获取标签在整个html中的坐标

    .offset()
    .offset().left
    .offset().top

  • 获取当前标签相对父标签(relative)的坐标（不一定是紧接着的父标签）

    .position()

  • 标签高度

    $('i1').height() # 获取height
    $('i1').innerHeight() # 获取height + padding
    $('i1').outerHeight() # 获取height + padding + border
    $('i1').outerHeight(true) # 获取height + padding + border + margin
    true小写

    height -> padding -> border -> margin

绑定事件

DOM： 三种绑定方式

jQuery：

  • 第一种

    $('.c1').click()
    $('.c1').....等

  • 第二种

    $('.c1').bind('click',function(){})
    $('.c1').unbind('click',function(){})

  • 第三种 委托，可以解决添加新标签其它方式无法绑定的问题，点击的时候才会绑定

    $('.c').delegate('a', 'click', function(){})
    $('.c').undelegate('a', 'click', function(){})

  • 第四种 3.0推荐

    $('.c1').on('click', function(){})
    $('.c1').off('click', function(){})

阻止事件发生

return false;

DOM方式
onclick="return Login();" #绑定也需要加return
function Login(){
.....
return false;
}
JQuery方式
$().click(function(){
$(':text,:password').each(function(){
...
return false; #循环内只终止循环
})
//可进行验证
return false;
})
！！！each循环内的return false会终止整个循环！！！

!!!页面框架加载完成后，自动执行，不需要所有元素都加载完成

$(function(){
//将绑定事件加在里面，以免有部分未加载完成事件不会执行
$(...)
})
$().ajax()

jQuery扩展

  • 第一种

    $.extend({
    'wangsen':function(){};
    })
    $.wangsen() $.方法

  • 第二种

    $.fn.extend()
    $('.c1').wangsen() $(..).方法

  • 导入js扩展包

    $.wangsen()，

    问题：
    1. 不同扩展包声明了同名扩展 ==> 暂无法解决
    2. 不同扩展包内的变量名重复 ==> 包在自执行函数内

    (function(arg){
    var status = 1;
    // 封装变量 只在当前作用域内生效
    arg.extend()
    })(jQuery) #传入jQuery或$参数

作业

一、# 纯高度，边框，外边距，内边距
二、所有实例敲一遍
三、编辑框

作业问题

  1. 禁用div点击：

    .c1

  2. 将input文本框设置为只读：

    $('').attr('readonly',true)
    $('').removeAttr('readonly')

  3. css添加与删除：

    $('').css('color','red')
    $('').css('color')

  4. 监测checkbox改变：

    $('').change(function(){})
    $('').delegate(':checkbox', 'change', function (){})

  5. jQ删除标签:

    $('').remove();

  6. 将function直接写在js中会默认执行，函数内的this代表当前window

posted @ 2020-07-05 16:16  Jerome12138  阅读(78)  评论(0)    收藏  举报