[TOC]

每日测验

"""
今日考题:
1.有一个列表[3,4,1,2,5,6,6,5,4,3,3]请写出一个函数，找出该列表中没有重复的数的总和
2.简述数据库表设计中一对一、一对多、多对多的应用场景,char与varchar的区别
3.js代码书写位置有几种，什么是事件，js如何绑定事件，常见的事件有哪些
4.什么是jQuery，它的基本语法是什么，jQuery导入方式有哪些分别有什么区别，
列举你所知道的jQuery选择器(针对表单筛选器是否有注意事项)
"""

昨日内容回顾

  • js事件
    ```python

    js绑定事件的两种方式

自己独立的敲出来昨天的案例

“”” 1.开关灯 pEle.classList.add() … 2.input框获取、失去焦点 onfocus onblur 3.计时器 onclick js代码逻辑 4.省市联动 onchange文本域变化 就记忆一个select “””


-  jQuery简介  
```python
"""
内部封装了并且提供了额外功能的模块、框架
    类库

兼容多个浏览器

版本更新
    1.X
    2.X
    3.X

宗旨
    write less do more

如何导入jQuery
    1.将文件下载到本地直接导入(压缩、未压缩)
        好处在于没有网也可以正常使用
        不好的地方在于需要重复书写，文件路径还要固定
        (pycharm模块功能 自动添加固定的代码
            配置
                编辑
                    file and code template
                        html
                        py
        )

    2.CDN服务
        CDN的概念:内容分发网络
        参考网站:bootcdn
            前端相关的应用程序都有免费的cdn服务

        好处在于无需下载对应的文件，直接走网络请求使用
        不好的地方在于必须要有网

基本语法结构
    jQuery().action()        === $().action()
"""
  • jQuery选择器
    ```python

    基本选择器

    $(‘#d1’) $(‘.c1’) $(‘span’) “”” jQuery选择器拿到的都是jQuery对象(你可以看成是一个数组)

重点 jQuery对象和标签对象的区分 jQuery >>> 标签对象 $(‘#d1’)[0]

    标签对象 >>> jQuery
        $(document.getElementById('d1'))
不同的对象之间调用的方法是不一样的，不能混用

“””

组合、分组、嵌套

$(‘div,span,p’) $(‘#d1,.c1,div’) $(‘div span’) # 后代 $(‘div>span’) # 儿子 $(‘div+span’) # 毗邻 $(‘div~span’) # 弟弟

基本筛选器

“”” 针对已经得到的结果进行二次筛选 :first :last :eq(index) :even :odd :gt(index) :lt(index) :not :has 从后代元素中筛选 $(‘div:has(“.c1”)’) “””

属性选择器

$(‘[username]’) $(‘[username=”jason”]’) $(‘input[username=”jason”]’)

表单筛选器

$(‘input[type=”text”]’) $(‘:text’) :text … :file

“”” 特殊情况 $(‘:checked’) 拿到默认选中的checkbox和option $(‘input:checked’) 在书写表单筛选器的时候 如果前面可以加限制条件最好加一个 “””

筛选器方法

.next() .nextAll() .nextUntil() # 不包含最后一个

.prev() .prevAll() .prevUntil() # 不包含最后一个

.parent() .parents() .parentsUntil() # 不包含最后一个

.children() # 儿子们 .siblings() # 兄弟 同级别上下所有

$(‘div p’) === $(‘div’).find(‘p’)

基本筛选器优化封装

.first() .last() .not() .has() .eq() “”” 选择器无论你用哪个都可以 只要能够实现需求就行 “””


<a name="c7a1dd9a"></a>
# 今日内容概要

今天要把jQuery全部结束

- jQuery操作标签
- jQuery绑定事件
- jQuery补充知识点
- jQuery动画效果(了解)
- Bootstrap(前端框架)开头

<a name="69f4f6b4"></a>
# 今日内容详细

-    
<a name="2dbfaab0"></a>
### jQuery练习题
```javascript
$('#i1')
r.fn.init [div#i1.container]

$('h2')
r.fn.init [h2, prevObject: r.fn.init(1)]

$('input')
r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]

$('.c1')
r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]

$('.btn-default')
r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]

$('.c1,h2')
r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]

$('.c1,#p3')
r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]

$('.c1,.btn')
r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]

$('form').find('input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]

$('label input')
r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]

$('label+input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]

$('#p2~li')
r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]

$('#f1 input:first')
r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]

$('#my-checkbox input:last')
r.fn.init [input, prevObject: r.fn.init(1)]

$('#my-checkbox input[checked!="checked"]')
r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]__proto__: Object(0)

$('label:has("input")')
r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)]

  • 操作标签

    ```python

    操作类

    “”” js版本 jQuery版本 classList.add() addClass() classList.remove() removeClass() classList.contains() hasClass() classList.toggle() toggleClass() “””

css操作

111

222

“””一行代码将第一个p标签变成红色第二个p标签变成绿色””” $(‘p’).first().css(‘color’,’red’).next().css(‘color’,’green’)

jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签

jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法

class MyClass(object): def func1(self): print(‘func1’) return self

def func2(self):
    print('func2')
    return self

obj = MyClass() obj.func1().func2()

位置操作

offset() # 相对于浏览器窗口 position() # 相对于父标签

scrollTop() # 需要了解 $(window).scrollTop() 0 $(window).scrollTop() 969 $(window).scrollTop() # 括号内不加参数就是获取 1733 $(window).scrollTop(0) # 加了参数就是设置 n.fn.init [Window] $(window).scrollTop(500) n.fn.init [Window] scrollLeft()

尺寸

$(‘p’).height() # 文本 20 $(‘p’).width() 1670 $(‘p’).innerHeight() # 文本+padding 26 $(‘p’).innerWidth() 1674 $(‘p’).outerHeight() # 文本+padding+border 26 $(‘p’).outerWidth() 1674

文本操作

“”” 操作标签内部文本 js jQuery innerText text() 括号内不加参数就是获取加了就是设置 innerHTML html()

$(‘div’).text() “

    有些话听听就过去了，不要在意，都是成年人!

“ $(‘div’).html() “

有些话听听就过去了，不要在意，都是成年人!

“ $(‘div’).text(‘你们都是我的大宝贝’) w.fn.init [div, prevObject: w.fn.init(1)] $(‘div’).html(‘你个臭妹妹’) w.fn.init [div, prevObject: w.fn.init(1)] $(‘div’).text(‘

你们都是我的大宝贝

‘) w.fn.init [div, prevObject: w.fn.init(1)] $(‘div’).html(‘

你个臭妹妹

‘) w.fn.init [div, prevObject: w.fn.init(1)] “””

获取值操作

“”” js jQuery .value .val() “”” $(‘#d1’).val() “sasdasdsadsadad” $(‘#d1’).val(‘520快乐’) # 括号内不加参数就是获取加了就是设置

w.fn.init [input#d1] $(‘#d2’).val() “C:\fakepath\01测试路由.png” $(‘#d2’)[0].files[0] # 牢记两个对象之间的转换 File {name: “01测试路由.png”, lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: “”, size: 28733, …}

属性操作

“”” js中 jQuery setAttribute() attr(name,value) getAttribute() attr(name) removeAttribute() removeAttr(name)

在用变量存储对象的时候 js中推荐使用
XXXEle 标签对象 jQuery中推荐使用 $XXXEle jQuery对象 “”” let $pEle = $(‘p’) undefined $pEle.attr(‘id’) “d1” $pEle.attr(‘class’) undefined $pEle.attr(‘class’,’c1’) w.fn.init [p#d1.c1, prevObject: w.fn.init(1)] $pEle.attr(‘id’,’id666’) w.fn.init [p#id666.c1, prevObject: w.fn.init(1)] $pEle.attr(‘password’,’jason123’) w.fn.init [p#id666.c1, prevObject: w.fn.init(1)] $pEle.removeAttr(‘password’) w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

“”” 对于标签上有的能够看到的属性和自定义属性用attr 对于返回布尔值比如checkbox radio option是否被选中用prop “””

$(‘#d3’).attr(‘checked’) “checked” $(‘#d2’).attr(‘checked’) undefined $(‘#d2’).attr(‘checked’) undefined $(‘#d4’).attr(‘checked’) undefined $(‘#d3’).attr(‘checked’) “checked” $(‘#d3’).attr(‘checked’,’checked’) # 无效 w.fn.init [input#d3]

$(‘#d2’).prop(‘checked’) false $(‘#d2’).prop(‘checked’) true $(‘#d3’).prop(‘checked’,true) w.fn.init [input#d3] $(‘#d3’).prop(‘checked’,false) w.fn.init [input#d3]

文档处理

“”” js jQuery createElement(‘p’) $(‘

‘) appendChild() append()

“”” let $pEle = $(‘

‘) $pEle.text(‘你好啊 草莓要不要来几个?’) $pEle.attr(‘id’,’d1’)
$(‘#d1’).append($pEle) # 内部尾部追加 $pEle.appendTo($(‘#d1’))

$(‘#d1’).prepend($pEle) # 内部头部追加 w.fn.init [div#d1] $pEle.prependTo($(‘#d1’)) w.fn.init [p#d1, prevObject: w.fn.init(1)]

$(‘#d2’).after($pEle) # 放在某个标签后面 w.fn.init [p#d2] $pEle.insertAfter($(‘#d1’))

$(‘#d1’).before($pEle) w.fn.init [div#d1] $pEle.insertBefore($(‘#d2’))

$(‘#d1’).remove() # 将标签从DOM树中删除 w.fn.init [div#d1]

$(‘#d1’).empty() # 清空标签内部所有的内容 w.fn.init [div#d1]


<a name="10b2761d"></a>
### 事件

```python
// 第一种
    $('#d1').click(function () {
            alert('别说话 吻我')
    });

// 第二种(功能更加强大 还支持事件委托)
    $('#d2').on('click',function () {
            alert('借我钱买草莓 后面还你')
    })
  • 克隆事件
    ```html 


-  自定义模态框  
```python
"""
模态框内部本质就是给标签移除或者添加上hide属性
"""

  • 左侧菜单 

    <script>
 $('.title').click(function () {
     // 先给所有的items加hide
     $('.items').addClass('hide')
     // 然后将被点击标签内部的hide移除
     $(this).children().removeClass('hide')
 })
</script>
<!--尝试用一行代码搞定上面的操作-->

  • 返回顶部 

    <script>
 $(window).scroll(function () {
     if($(window).scrollTop() > 300){
         $('#d1').removeClass('hide')
     }else{
         $('#d1').addClass('hide')
     }
 })
</script>

  • 自定义登陆校验
    ```python

    在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息

    username:

    password: 


-  input实时监控  
```python
<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)  
    })
</script>

  • hover事件 

    <script>
 // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
 //     alert(123)
 // })

 $('#d1').hover(
     function () {
         alert('我来了')  // 悬浮
 },
     function () {
         alert('我溜了')  // 移开
     }
 )
</script>

  • 键盘按键按下事件 

    <script>
 $(window).keydown(function (event) {
     console.log(event.keyCode)
     if (event.keyCode === 16){
         alert('你按了shift键')
     }
 })
</script>

今日作业

"""
今日作业
必做
1.利用jQuery链式操作一句话完成菜单显隐展示
2.整理日考题目
3.整理今日内容完成博客书写
选做
1.预习前端框架Bootstrap
"""