前端

内容回顾:

  -BOM

  -jquery介绍

  -jquery下载和引入方式

    npm install jquery  

  -jquery的选择器

    -基本选择器

      -通配符选择器

      - id选择器

      - 类选择器

      - 标签选择器

    - 高级选择器

      - 后代  空格表示

      -子代  >

      - 毗邻兄弟  +

      - 兄弟      ~

      -  组合选择器   div,p,a

      -  交集选择器   div,active

      -  属性选择器   $('input[type="text"]')

    -  jquery的动画效果

      - 普通动画

        先要停掉动画 stop()

         - show(3000,fn)

         -  hide()

         -  toggle(3000,fn)

      -   卷帘门效果

           -  slideDown()

           -  slideUp()

           -  slideToggle()

      -   淡入淡出

           -  fadeIn()

           -  fadeOut()

         -  fadeToggle()

    - jquery和js对象转换

      js===>jquery

      $(jsDOM对象)

      jquery==>jsDOM对象

        $('div')[0]

        $('div').get(0)

今日内容:

<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<style> li:nth-child(3){
background: deeppink;
}
</style> </head>
<body> <ul>
<li class="item1">alex</li>
<li class="item1">得劲</li>
<li class="item1">裤架为</li>
<li class="item1">王家辉</li>
</ul>
<input type="text">
<input type="radio" checked name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<select name="" id="">
<option value="smoke" >抽烟</option>
<option value="drink">喝酒</option>
<option value="tangtou" selected>烫头</option>
<option value="koufoot">抠脚</option>
</select> <button>提交</button> <script> //ajax
//筛选选择器
$('ul li:eq(3)').css('color','yellow');//eq从0开始选择
$('ul li:first').css('color','red');
$('ul li:last').css('color','red');
$('ul li:nth-child(4)').css('background','yellow');//从1开始选择 // console.log($('input[type=radio]:checked'));
// console.log($('select option:selected').text()); $('button').click(function () {
console.log($('input[type=radio]:checked'));
})
</script>
</body>

  -补充选择器(筛选选择器,筛选的方法)

    -筛选选择器

      -eq()  获取匹配的元素  索引从0开始

      -first()

      -last()

      -属性选择器$('ul li:nth-child(4)')

      -$('input [type=radio]:checked')  获取选中的单选的元素

      -$('select option:selected').text()  获取下拉框被选中的元素

<body>

    <ul>
<li class="item1">
<a href="javascript:void(0);">alex</a>
<ol>
<li>小茹</li>
</ol>
</li>
<li class="item2">
<p class="active">得劲</p>
</li>
<li class="item3">裤架为</li>
<li class="item4">王家辉</li>
</ul> <script>
//find(selector)
console.log($('ul').find('li.item1 a').css('color','red')) //链式编程
$('ul').find('li.item1 a').css('color','red').click(function () {
//html() 如果没有参数,表示获取值,如果有一个参数,表示设置值
alert($(this).html()); console.log($(this).html('黄文泰'));
$(this).html('黄文泰').css({'color':'yellow'}) }); console.log($('ul').find('*')); //获取的是亲儿子们
console.log($('ul').children()); // $('ul li:eq(3)')
console.log($('ul li').eq(3)) //获取的是亲爹爹
console.log( $('p.active').parent()) console.log( $('.item1').siblings('.item2'));
</script>

- 筛选的方法
            - $('ul').find('li.active') 查找后代(儿子和孙子。。。。)元素
            - children() 查找亲儿子
            - eq() 获取指定的元素 索引从0 开始
            - parent() 获取亲爹
            - siblings() 选取兄弟(除它本身之外)

<script src="jquery.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
} div.box{
width: 600px;
height: 600px; }
ul{
overflow: hidden;
}
ul li {
float: left;
width: 194px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: red;
border: 1px solid darkgoldenrod;
font-size: 18px;
color: #fff;
font-weight: 700;
}
ul li a{
display: block;
width: 194px;
height: 80px;
text-decoration: none;
color: #fff; }
ul li a.active{
background-color: green;
} div.box p{
width: 594px;
height: 300px;
line-height: 300px;
text-align: center;
color: #fff;
font-weight: bolder;
background-color: darkred;
display: none;
}
div.box p.active{
display: block;
} </style> </head>
<body>
<div class="box">
<ul>
<li>
<a href="javascript:void(0)">新闻</a>
</li>
<li>
<a href="javascript:void(0);">音乐</a>
</li>
<li>
<a href="javascript:void(0);">体育</a>
</li>
</ul>
<p>新闻</p>
<p>音乐</p>
<p>体育</p>
</div> <script>
       $('ul li a').click(function () {
$(this).addClass('active').parent().siblings('li').find('a').removeClass('active');
let index = $(this).parent().index();
console.log(index);
$('.box p').eq(index).addClass('active').siblings('p').removeClass('active');
})
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
} div.box{
width: 600px;
height: 600px; }
ul{
overflow: hidden;
}
ul li {
float: left;
width: 194px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: red;
border: 1px solid darkgoldenrod;
font-size: 18px;
color: #fff;
font-weight: 700;
}
/*ul li {*/
/*display: block;*/
/*width: 194px;*/
/*height: 80px;*/
/*text-decoration: none;*/
/*color: #fff;*/ /*}*/
ul li.active{
background-color: green;
} div.box p{
width: 594px;
height: 300px;
line-height: 300px;
text-align: center;
color: #fff;
font-weight: bolder;
background-color: darkred;
display: none;
}
div.box p.active{
display: block;
} </style> </head>
<body>
<div class="box">
<ul>
<li>新闻</li>
<li>音乐</li>
<li>体育</li>
</ul>
<p>新闻</p>
<p>音乐</p>
<p>体育</p>
</div> <script> $('ul li').click(function () {
console.log($(this).addClass('active')); $(this).addClass('active').siblings('li').removeClass('active'); let index = $(this).index();
$('.box p').eq(index).addClass('active').siblings('p').removeClass('active');
}) </script> </body>
</html>

- jquery自定义动画

   - animate({动画队列属性},时间,fn)

.box{
width: 200px;
height: 200px;
background-color:red;
color: #fff;
position: absolute;
top: 30px;
left: 0;
line-height:200px;
text-align: center; }
</style> </head>
<body>
<button>动画</button>
<div class="box">得劲</div>
<script> //动画 在3秒时间 宽高 400px 变成圆,color:green
$('button').click(function () {
let animate1 = {
"width":'400',
"height":"400",
"border-radius":'200',
"top":"400",
"left":"600", } // animate() 自定义动画
$('.box').animate(animate1,3000,function () {
$(this).hide();
})
})
</script>

音频

<audio src="./Beyond%20-%20情人.mp3" controls></audio>

- jquery的DOM操作
        - 样式操作
           - .css()
        - 对象属性操作
           # 如果有一个参数,表示获取值,两个参数,设置值
            prop()
           # 移除单个值或者多个值,多个值用空格隔开
            removeProp()
        - 标签属性操作
            # 如果有一个参数,表示获取值,两个参数,设置值
            attr()
            # 移除单个值或者多个值,多个值用空格隔开
            removeAttr()
        - 类操作
            - addClass('active xxx bbb ccc')
            - removeClass('active xxx')
            - toggleClass()
           
        - 值的操作
            # 如果没有参数,表示获取值,如果有一个参数,表示设置值
            - text()
            - html()
            - val()

 <style>
.box{
width: 200px;
height: 200px;
background-color:red;
color: #fff;
position: absolute;
top: 30px;
left: 0;
line-height:200px;
text-align: center; }
div.hide{
display: none;
} </style> </head>
<body>
<button>隐藏</button>
<div class="box hide">得劲</div>
<script> $('button').click(function () { $('.box').addClass('hide');
// $('.box').removeClass('aa bb cc');
// $('.box').toggleClass('hide');
})
</script>
</body> <body> <div class="box"> </div>
<input type="text" value="家辉">
<script> // console.log($('.box').text());
// $('.box').text('得劲'); console.log($('.box').html());
$('.box').html('<h2>得劲</h2>'); console.log($('input[type=text]').val());
$('input[type=text]').val('哈哈哈') </script>
</body>
<body>
<audio src="Beyond%20-%20情人.mp3" controls id="21" class="" title=""></audio> <input type="radio" checked>男 <a href="">百度一下</a> <script>
console.log($('audio'));
console.log($('audio').prop('src'));
console.log($('audio').prop('id','mp3')); console.log($('input').prop('checked'));
console.log($('input').attr('checked'));
$('a').attr('href','http://www.baidu.com');
$('a').prop('href','http://www.baiduxxx.com');
$('a').attr('title','http://www.baidu.com'); $('a').removeAttr('href title'); console.log($('a')) </script>

      

day56 Pyhton 前端Jquery08的更多相关文章

  1. day50 Pyhton 前端01

    文档结构: <!-- 定义文档类型 --> <!DOCTYPE html> <!-- 文档 --> <html lang='en'> <!-- 仅 ...

  2. day57 Pyhton 前端Jquery09

    内容回顾: - 筛选选择器 $('li:eq(1)')  查找匹配的元素 $('li:first') $('li:last') - 属性选择器 - 筛选的方法 - find()  查找后代的元素 - ...

  3. day55 Pyhton 前端Jquery07

    昨日回顾: 表单,点击submit提交以后,服务端受到信息 import socket import pymysql from urllib.parse import unquote def run( ...

  4. day54 Pyhton 前端JS06

    内容回顾 - ECMAScript5.0 基础语法 - var 声明变量 - 五种基本数据类型 - string - number NaN number 1 number - boolean - un ...

  5. day54 Pyhton 前端JS05

    今日内容: 1.数组Array var colors = ['red','color','yellow']; 使用new 关键词对构造函数进行创建对象 var colors2 = new Array( ...

  6. day53 Pyhton 前端04

    内容回顾: 盒子: 内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加 外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值 边框:border border-c ...

  7. day52 Pyhton 前端03

    内容回顾 块级标签: div p h 列表:ol;ul;dl 表格:table 行内标签: span a i/em b/strong u/del 行内块: input textarea img 其他: ...

  8. day51 Pyhton 前端02

    内容回顾: 1.h1~h6:加粗,数字越大级别越小,自动换行 2.br:换行;hr:分割线; (特殊符号,空格) 3.p:与前边和后边内容之间有间距 4.a标签的href:本地文件连接;网络连接;锚链 ...

  9. 最受Web前端开发者欢迎的五大开发工具

    工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...

随机推荐

  1. JVM 中的对象及引用

    JVM中对象的创建过程 对象的内存分配 虚拟机遇到一条 new 指令时,首先检查是否被类加载器加载,如果没有,那必须先执行相应的类加载过程. 类加载就是把 class 加载到 JVM 的运行时数据区的 ...

  2. JS的全局变量无法给Ajax里的变量赋值

    前阶段遇到这么一个问题,在JS定义一个全局变量,JS方法里的其他地方都能使用,偏偏ajax里无法赋值,也不是无法赋值,但赋值总是慢一拍,具体的解决方案如下图所示:

  3. JS基础回顾_滚动条

    // log function getScrollOffset() { if (window.pageXOffset) { return { x: window.pageXOffset, y: win ...

  4. access数据库一般注入方法及偏移注入

    1.access数据库与mysql数据库的差别 access没有数据库,access数据库每个数据都是单个文件,每个access只有表结构 mysql : 库名,表名,列名,字段内容 access:表 ...

  5. Robotframework自动化6-基础关键字介绍3

    这一章节介绍一下断言时用到的关键字,断言是写测试用例的必备,没有断言的测试用例是没有灵魂的. 一:Should Be Equal  Should Be Equal 是用来判断实践结果和预期结果是否一致 ...

  6. git个人常用命令

    git https://www.cnblogs.com/chenwolong/p/GIT.html 添加当前目录的所有文件到暂存区 $ git add . 提交暂存区到仓库区 $ git commit ...

  7. 使用VSCode和CMake构建跨平台的C/C++开发环境

    日前在学习制作LearnOpenGL教程的实战项目Breakout游戏时,希望能将这个小游戏开发成跨平台的,支持在多个平台运行.工欲善其事必先利其器,首先需要做的自然是搭建一个舒服的跨平台C/C++开 ...

  8. python-面向过程面向对象和栈的实现

    0x01 大纲 面向过程 函数 参数传递 返回 面向对象 类 栈的数据结构实现 0x02 例子 def add(a,b): return a+b if __name__ == '__main__': ...

  9. 研究生杂谈-1粗粒度(Coarse-grained)VS细粒度(fine-grained)

    粒度似乎是根据项目模块划分的细致程度区分的,一个项目模块(或子模块)分得越多,每个模块(或子模块)越小,负责的工作越细,就说粒度越细,否则为粗粒度. 简而言之: 粗粒度:模块的功能太过于集中. 细粒度 ...

  10. java ThreadLocal理解和使用

    一.ThreadLoal的理解 ThreadLoal 变量,它的基本原理是,同一个 ThreadLocal 所包含的对象(对ThreadLocal< String >而言即为 String ...