javascript基础03

1. 算术运算符

后增量/后减量运算符 ++ ,--

比较运算符 ( >, <, >=, <=, ==, !=,===,!== )

逻辑运算符( &&, || , !)

字符串的比较

字符串按字符在unicode中的码位来比较大小,并且会从开始首位字符比较大小,如果相等会比较下一位字符,直到比较出大小或字符都比较完为止。

alert("101"<"3");

返回true

2.程序流程控制

一、条件语句 if

判断条件,只有当为true时,才会执行条件花括号里的代码。

二、switch语句

语法:

switch (expression){
        case value:
            //statement
            break;
        case value:
            //statement
            break;
        default:
            //statement
    }

表达式满足某个value值才会执行那个value值对应的代码,如果都没有满足条件,那么就会执行default里的代码

扩展:

今天介绍一个插件:responsiveslides

它是做轮播图的插件,基于jquery,使用起来感觉还不错,可以做响应式的轮播图,从名字上就可以知道。

它是一个组件化的插件,基于面向对象,但jquery里的,面向对象的方式给处理过,所以直接看源码

可能很难懂。

不过它有好好的说明使用方式:

$(function() {
    $(".rslides").responsiveSlides({
          pager: true,
           // 默认为false,需要展示时(true)展示索引点,默认为数字12345,去js库里修改就可以了,去掉n,修改样式就可以出现自己所需的,如圆点
          nav: true,             // 展示上一张和下一张的导航,与下面的prevText和nextText有关联,它们是它在页面的表示方式
          pause: false,           // 鼠标移入移出是否停止
          pauseControls: true,    // Boolean: Pause when hovering controls, true or false
          prevText: "<",   // 修改左右按钮的符号
          nextText: ">",
    });
  });

至于需要大大的修改为自己所需要的效果,这个可以配合浏览器调试工具

去找到它们的选择器,直接在css里重新编写一个,覆盖掉之前的样式,

这个就可以做到一个合适自己的轮播图。

上面的只是一部分参数,还有很多,目前还没去修改观察效果。

HTML代码:

<!-- 使用一个div包住它,而那些js添加的标签会直接加载到ul标签后面(而这个添加不是自己编写添加,只是修改上面的参数就会自动添加) -->
<div id="banner">
    <ul class="rslides" id="rslides">
      <li><img src="111.jpg" alt=""></li>
      <li><img src="222.jpg" alt=""></li>
      <li><img src="333.jpg" alt=""></li>
      <li><img src="444.jpg" alt=""></li>
      <li><img src="555.jpg" alt=""></li>
    </ul>
</div>

在下载responsiveslides包里有个css文件,那是默认的css设置,有需要可以使用调试工具,一边调试一边修改

网上还有很多类似的插件,但目前不知道怎么才能快速灵活运用起来,使用起来都很僵硬,不能把插件之间一起运用

起来,重新封装成一个插件。

时间: 2025-01-13 06:58:38

javascript基础03的相关文章

javaScript基础03数组..

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript基础练习03</title> 6 <script> 7 // 简单数据类型 Number String Boolean null undefined 8 9 // 复杂数据类型 对象,方法.,引用类型 10

Javascript DOM 03 表格添加、删除 + 搜索

获取 tBodies.tHead.tFoot.rows.cells 隔行变色 鼠标移入高亮 添加.删除一行 DOM方法的使用  添加.删除 1 <script> 2 window.onload=function (){ 3 /*var str='abcdef'; 4 alert(str.search('g')); //找到并且返回字符串出现的位置,如果没找到-1 5 */ 6 /* 7 var str='abc 123 ert'; 8 var arr=str.split(' '); 9 ale

JavaScript 基础学习1-day14

JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator

JavaScript 基础学习(二)

JavaScript 基础学习(二) instanceof方法: var s = "hello"; var i = 8; //typeof 只能判断基本数据类型 alert(typeof(s)); alert(typeof (i)); //对于引用数据类型,用instanceof var s2=new String("hello2") alert(typeof(s2)); alert(s2 instanceof String);//true var n = new

javascript入门书籍推荐《javascript基础教程》

前段时间看javascript高级教程的时候,发现很多基础的javascript概念,自己不懂. 网上搜了一下,看到大家对<javascript基础教程(第8版)>评价不错,买了一本. 作者: (美)Tom Negrino Dori Smith 译者: 陈剑瓯 柳靖 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 翻开看了后,受益匪浅,决定将这本书推荐给javascript的入门童鞋. 这本书的读者,要有一定的HTML基础,因为javascript基本都是对Dom的操作,所以,有一定的HT

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

Javascript.01 -- Javascript基础

Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司   研发出世界上第一款浏览器. 95年 sun公司   java语言诞生 网景公司和sun合作. Java+script   ===> javascript 1.2 W3c规范 ?结构标准        html ?表现标准   css ?行为标准      js 1.3 JavaScript和ECMAScript的关系 ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q

javascript基础学习(八)

javascript之日期对象 学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在javascript中并没有日期型的数据类型,但是提供了一个日期对象可以操作日期和时间. 日期对象的创建: new Date(); 二.将日期对象转换为字符串 将日期对象转换为字符串可以使用以下4种方法: date.toString();//将日期对象转换为字符串时,采