11.20课堂笔记、作业以及学习心得

11.20课堂笔记、作业以及学习心得

11.20课堂笔记

1、认识jQuery

jQuery 的理念是:write less,do more。

jQuery 极大的简化了 javascript 开发人员遍历HTML文档、操作 DOM 、处理事件、执行动画和开发 Ajax 的操作。

1.1 jQuery优势
  1. 轻量级。压缩后可以保持在30kb左右。
  2. 强大的选择器。可以使用CSS1-CSS3几乎所有选择器。
  3. 出色的DOM操作的封装。
  4. 可靠的事件处理机制。
  5. 完善的Ajax。
  6. 不污染顶级变量。jQuery只建立一个名为jQuery的对象,其所有的函数方法都在这个对象之下。
1.2 使用jQuery

使用时,在页面引入 jquery.js 库文件就可以使用了。

<script type="text/javascript" src="js/jquery.js"></script>

(1)简单编写jQuery:

$(document).ready(function(){
    alert('Hello jQuery');
});

window.onload方法和$(document).ready()方法的区别。

  • window.onload必须等待网页中所有内容加在完毕才能执行。
  • $(document).ready()是网页中所有DOM结构绘制完成后就执行,可能DOM元素关联的东西并没有加载。

(2)链式风格

//等待dom元素加载完毕.
$(document).ready(function(){
    $(".level1 > a").click(function(){
        $(this).addClass("current")   //给当前元素添加"current"样式
        .next().show()                //下一个元素显示     .parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式
        .next().hide();                //它们的下一个元素隐藏
        return false;//事件处理阻止了默认的事件行为并停止了事件通过dom向上冒泡
    });
});

2、jQuery对象和DOM对象

2.1 jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的。拥有jQuery里面的方法。

console.log($('#dd'));
console.log(document.getElementById('dd'));

需要注意的是:jQuery对象中无法使用DOM对象的任何方法。
DOM对象也不能使用jQuery里面的方法。

2.2 jQuery对象和DOM对象的相互转换

(1)jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。

//第一种方法
console.log($('#dd'));
console.log($('#dd')[0]);

//第二种方法
console.log($('#dd'));
console.log($('#dd').get(0));

(2)DOM对象转化成jQuery对象

只需要把DOM对象包装起来,既可以获得一个jQuery对象了。

var dd = document.getElementById('dd');
var $dd = $(dd);
console.log($dd);

3、jQuery选择器

3.1 基本选择器

(1)#id
根据给定的ID匹配一个元素

(2).class
根据给定的类名匹配元素

(3)element
根据给定元素名匹配元素

(4)*
匹配所有元素

(5)selector1,selector2,selector3
将每一个选择器匹配到的元素合并返回

3.2 层次选择器

(1)$(‘a d’)
选取a元素里所有的d后代元素

(2)$(‘p>c’)
选取p元素下的c子元素

(3)$(‘prev+next’)
选取紧邻在prev元素后的next元素

(4)$(‘prev~siblings’)
选取prev元素之后的所有siblings兄弟元素

3.3 过滤选择器

(1):first
选取第一个元素

(2):last
选取最后一个元素

(3):not(selector)
去除所有与指定选择器匹配的元素

(4):even
选取所有索引是偶数的元素

(5):odd
选取所有索引是奇数的元素

(6):containes(text)
选取所有文本内容为’text’的元素

(7):empty
选取不包含子元素或者文本的空元素

(8):has
选取含有选择器所匹配的子元素的父元素

(9)[attr]
选取拥有此属性的元素

(10)[attr = value]
选取属性值为value的元素

(11)[attr^=value]
选取属性值以value开头的元素

(12)[attr$=value]
选取属性值以value结束的元素

(13)[attr*=value]
选取属性值含有value的元素

(14):nth-child(index)
选取父元素下第index个子元素或者奇偶元素

(15):first-child
选取父元素的第一个子元素

(16):last-child
选取每个父元素的最后一个子元素

(17):eq(index)
选择索引值为index的元素

(18):gt(index)
选择第index个的元素

11.20作业

制作CODING COFFEE模拟秒杀页面
(1)html部分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta charset="UTF-8">
  <title> 限时秒杀 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link type="text/css" rel="stylesheet" href="../css/seckill.css"></link>
 </head>

 <body>
     <h1 id="title">Coding Coffee限时秒杀活动!</h1>
     <h1 id="price">惊喜价:只要9.98,9.98你买不了吃亏买不了上当!9.98一杯蓝山带回家!</h1>
     <h1 id="secTime">秒杀倒计时:</h1>
     <div id="parent1">
        <div class="parent" >
            <div class="left" id="left1">
                <img src="../img/c2.jpg">
            </div>

            <div class="right" id="right1">
                <h2 class="smallTitle" id="smallTitle1">蓝山咖啡</h2>
                <p class="theme">当季新品</p>
                <p class="bigTheme">给咖啡多一口热爱!</p>
                <p class="smallTheme">
                    纯蓝山咖啡口感、香味较淡,但喝起来却非常香醇精致;
                    具有贵族的品味,乃咖啡中之极品。
                </p>
                <div class="number">                    
                    <table>
                        <tr>
                            <td>数量:</td>
                            <td><input id="subtractOne" type="button" value="-"  onclick="subtract()"></td>
                            <td><input id="num" type="text" name="number" value="1"></td>
                            <td><input type="button" id="addOne" value="+" onclick="add()"><span style="display:inline-block;margin-left:10px;"></span></td>
                            <td><span class="empty">库存100杯</span></td>
                        </tr>
                    </table>
                </div>
                <div class="buy-add">
                    <div class="buy">
                        <a href="#" id="buy">立即购买</a>
                    </div>
                    <div class="addCar">
                        <a href="../html/shopCar.html" id="addCar">加入购物车</a>
                    </div>
                    <div style="clear:both"></div>
                    </div>
                </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/seckill.js"></script>
 </body>

</html>

(2)css部分

*{
    margin:0;
    padding:0;
}
body{
    background-color:#fdffff;
}       
hr{
    width:70%
}
#title{
    color:green;
    font-size:60px;
    text-align:center;
    margin:20px;
}
#secTime{
    color:red;
    font-size:60px;
    margin:20px;
}
#price{
    color:red;
    margin:20px;
    text-align:center;
}
.smallTitle{
    color:blue;
    font-size:35px;
    text-align:center;
    margin-bottom:20px;
}
.theme{
    color:#ff8040;
    font-size:15px;
    margin-bottom:20px;
}
.bigTheme{
    color:#00aeae;
    font-size:30px;
    margin-bottom:20px;
}
.smallTheme{
    font-size:20px;
    font-family:"Times New Roman";
    margin-bottom:20px;
}
.parent{
    width:900px;
    height:400px;
    /*border:2px solid red;*/
    margin:0 auto;
    background-color:#fbfffd;
}       
.left{
    float:left;
    width:400px;
    height:400px;
}
.right{
    float:right;
    width:450px;
    height:400px;
}
.buy-add{
    width:350px;
    height:50px;
    margin-top:20px;
}
.empty{
    display:inline-block;
    /*width:80px;*/
    margin-left:50px;
}
#num{
    width:30px;
}
.buy-add div{
    display:block;
}
.buy-add a{
    display:inline-block;
    line-height:45px;
    width:150px;
    height:45px;    
    text-decoration:none;
}
#buy{
    background-color:#ffeded;
    color:#FF0036
}
#addCar{
    background-color:#ff0036;
    color:#fff;
}
.buy{
    float:left;
    border:1px solid #FF0036;
    text-align:center;
}
.addCar{
    float:right;
    border:1px solid #ff0036;
    text-align:center;
}

(3)js部分

//调用倒计时函数
//countTime();
//循环执行计时函数
//function countTime(){
var myVar=setInterval(seckill,500);
//}
//调用循环判断数量函数
rotationJudgeNum();
//计算倒计时
var tmp=1;
var sectime;
function seckill(){
    var newTime=new Date();
    var actTime=new Date(2017,10,20,9,41);
    secTime=actTime.getTime()-newTime.getTime();
    //console.log(secTime);
    if(secTime>0){
        var sec_day=parseInt(secTime/(24*60*60*1000));
        var sec_hour=parseInt(secTime/(60*60*1000)%24);
        var sec_min=parseInt(secTime/(60*1000)%60);
        var sec_sec=parseInt(secTime/(1000)%60);
        //console.log(sec_day);
        //console.log(sec_hour);
        //console.log(sec_min);
        //console.log(sec_sec);
        var countDown="秒杀倒计时:"+sec_day+"天"+sec_hour+"时"+sec_min+"分"+sec_sec+"秒";
        //console.log(countDown);
        document.getElementById('secTime').innerHTML=countDown;
    }else{
        document.getElementById('secTime').innerHTML="秒杀开始";
        document.getElementById('secTime').style.cssText="text-align:center;";
        //调用循环改变颜色函数
        colorRotation();
        document.getElementById('buy').href="../html/buy.html";
        clearInterval(myVar);
    }
}

//给秒杀开始改变颜色
function rotation(){
    if(tmp%2==0){
        document.getElementById('secTime').style.cssText="color:#EEEE00;text-align:center;";
        tmp=tmp+1;
    }else{
        document.getElementById('secTime').style.cssText="color:red;text-align:center;";
        tmp=tmp+1;
    }
}
function colorRotation(){
    setInterval(rotation,500);
}

//判断输入数量是否符合规范
function judgeNum(){
    var str=document.getElementById('num').value;
    var num=parseInt(str);
    //console.log(num);
    //console.log(typeof num);
    if(!num){
        num=1;
        document.getElementById('num').value=num;
    }
    document.getElementById('num').value=num;
}
//循环执行判断数量函数
function rotationJudgeNum(){
    setInterval(judgeNum,200);
}
//购买数量减一
function subtract(){
    var str=document.getElementById('num').value;
    var num=parseInt(str);
    if(num>1){
        num=num-1;
    }
    document.getElementById('num').value=num;
    console.log(num);
}
//购买数量加一
function add(){
    var str=document.getElementById('num').value;
    var num=parseInt(str);
    num=num+1;
    document.getElementById('num').value=num;
}

11.20学习心得

今天学习了jQuery的一些基础知识,重要的是jQuery的选择器。

资源下载链接为: https://pan.quark.cn/s/67c535f75d4c 在机器人技术中,轨迹规划是实现机器人从一个位置平稳高效移动到另一个位置的核心环节。本资源提供了一套基于 MATLAB 的机器人轨迹规划程序,涵盖了关节空间和笛卡尔空间两种规划方式。MATLAB 是一种强大的数值计算与可视化工具,凭借其灵活易用的特点,常被用于机器人控制算法的开发与仿真。 关节空间轨迹规划主要关注机器人各关节角度的变化,生成从初始配置到目标配置的连续路径。其关键知识点包括: 关节变量:指机器人各关节的旋转角度或伸缩长度。 运动学逆解:通过数学方法从末端执行器的目标位置反推关节变量。 路径平滑:确保关节变量轨迹连续且无抖动,常用方法有 S 型曲线拟合、多项式插值等。 速度和加速度限制:考虑关节的实际物理限制,确保轨迹在允许的动态范围内。 碰撞避免:在规划过程中避免关节与其他物体发生碰撞。 笛卡尔空间轨迹规划直接处理机器人末端执行器在工作空间中的位置和姿态变化,涉及以下内容: 工作空间:机器人可到达的所有三维空间点的集合。 路径规划:在工作空间中找到一条从起点到终点的无碰撞路径。 障碍物表示:采用二维或三维网格、Voronoi 图、Octree 等数据结构表示工作空间中的障碍物。 轨迹生成:通过样条曲线、直线插值等方法生成平滑路径。 实时更新:在规划过程中实时检测并避开新出现的障碍物。 在 MATLAB 中实现上述规划方法,可以借助其内置函数和工具箱: 优化工具箱:用于解决运动学逆解和路径规划中的优化问题。 Simulink:可视化建模环境,适合构建和仿真复杂的控制系统。 ODE 求解器:如 ode45,用于求解机器人动力学方程和轨迹执行过程中的运动学问题。 在实际应用中,通常会结合关节空间和笛卡尔空间的规划方法。先在关节空间生成平滑轨迹,再通过运动学正解将关节轨迹转换为笛卡
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值