2018-10-11:JS与jQuery基础

JS基础

Java： 面向对象 编译型 强变量 服务器
JS： 基于对象 解释型 弱变量 客户端

  • 编译和解释：
    编译是将源代码和类库编译成目标代码，特点是一句错误编译不通过不能运行。
    解释是逐行解释，遇到错误，可能只影响有错部分的输出。

  • 基于对象：不能使用继承，浏览器提供了一些内置的对象，也可以定义一些自定
    义的对象，但他们之间不能继承。

  • 强变量和弱变量
    强变量：强制申明数据类型，可以防止算错（防止内存不够，防止不能执行的
    计算比如数字*字符）

  • JavaScript（原名livescript）

  1. 一些界面效果和数据处理（数据验证）由浏览器（客户机）执行，减轻了服
    务器的压力。
  2. 替代用户的基本操作（点击，鼠标移入移出），完成与服务器的数据交互。
  • 步骤
  1. 所有的html元素可以找到指定的元素
<input type="text" id="txt" name="txt" class="txt" value="aaa"/>
<script type="text/javascript">
 var txt = document.getElementById('txt');
 alert(txt);
 //for(var i=0;i<txt.length;i++){}
 //txt[i].innerHTML='qqwe';修改元素的值
 //txt[i].onclick = function(){alert('abc');
 this.innerHMTL='adf';对象绑定函数（匿名函数）中才使用this
 }
</script>

//获取对象 getElementById,getElementsByName,getElementsByTagName
//对象的属性 value,innerHTML,getAttribute,length
  1. 找到指定元素
    修改或访问 这个元素的某个属性值.
    这个元素的响应用户动作。
  1. 申明变量通过多种方式获得html元素，如果是id直接获取，name循环获取
    ，class需要循环加判断获取
  2. 访问和修改获得html元素的值
  3. 给指定元素添加onclick事件绑定响应用户点击动作
  • 获得一个文本框的内容通过id
<input type="text" id="txt" name="txt" value="abcde"/>
<script type="text/javascript">
 var txt = document.getElementById('txt');
 alert(txt.value);
</script>
  • 获得一组p块的内容通过name
<p name="txt1">this is a p.</p>
<p name="txt1">this is a p2.</p>
<script type="text/javascript">
 
 var txt1 = document.getElementsByName('txt1');
 for(var i=0;i<txt1.length;i++){
     alert(txt1[i].innerHTML);
 }
</script>
  • 给一个按钮（通过TagName+getAttribute获得）添加点击事件，修改文本
    框的值
<input type="text" id="txt" name="txt" value="abcde"/>

<input type="button" class="btn" value="click"/>
<script type="text/javascript">
 var txt = document.getElementById('txt');
 var btn = document.getElementsByTagName('input');
 for(var i=0;i<btn.length;i++){
     var classvalue = btn[i].getAttribute('class');
     if(classvalue == 'btn'){
         btn[i].onclick = function(){
             txt.value='changed';
         }
     }
 }
</script>

JQuery基础

<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//1. $(document).ready(test);
//1.  function test(){
//1.   alert('1');
//1.  }

//2. $(document).ready(function(){  匿名函数
//2.   alert('2');
//2.  }

//3. var myJQuery = new $();  自行获得jQuery对象
//3. myJQuery.ready(function(){alert('3');} ready方法是所有元素加载完毕执行的方法

//4. $(function(){alert('4');}); 使用jQuery预制对象的ready方法
</script>
<input type="text" id="txt" name="txt" class="txt" value="aaa"/>
  • js变量和jQuery变量
    区别在于js用属性.value,jQuery用方法.val()。
  • jQuery基本方法(访问或者修改值）
    val() 没有参数，取出value值，元素要有value属性，有参数修改value值。
$(function(){
 //var txt = $('#txt').val();
 //var txt = $('input[name="txt"]').val();
 //var txt = $ ('.txt').val();
 //var txt = $('.divtxt > input').val();
 // alert(txt);
 

 //$('input[type="button"]').click(function(){
  $('.txt').val('ccc');
  $('.txt').attr('alt','ccc');
 });
});

attr() 只有一个参数，取出这个属性的值，两个参数，修改某个指定属性的值。

 //$('input[type="button"]').click(function(){
  $('.txt').attr('alt','ccc');
 });

html() 没有参数，取出innerHTML的内容；有参数，修改innerHTML的值和text()相比要取出全部标签。

var $p = $('.p');
alert($p.html());
<p class="p">2222</p>

$('input[type="button"]').click(function(){$('p').html('123');});

text() 只会取出文本内容。
css() 取出和修改指定css属性的值。

$('input[type="button"]').click(function(){$('p').css('color','red');});
  • 选择器
  1. 基本选择器：#,.,空格,>,~,tab
    属性选择器：[name="aa"]
  2. 过滤器
  3. 关系方法
    next(),prev(),parent(),children()
  • 通过class alt属性 id name 等各种方式获得文本框和p的值
  • 通过找到父亲的儿子这种方式找到元素
  • 使用 text，html修改内容
  • 使用css方法修改 元素的显示效果，颜色，大小
  • 点一个按钮旁边div变大
    参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.divtxt{width:100px;height:100px;background-color:black;}
</style>
<script type="text/javascript" src="../../tools/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">

$(function(){//ready方式 ，所有元素加载完毕执行的方法
    //var txt = $('input[name="txt"]').val(); 
    //var txt = $('#txt').val();
    //var txt = $('.txt').val();
    //var txt = $('.divtxt > input1').val();
    //var txt = $('input[alt="txt"]').val();
    //alert(txt);
    
    //js变量和jquery变量区别在 js用属性.value; jquery用方法 val();
    //var $p = $('.p');
    //alert($p.html());
    
    //var p = (document.getElementsByTagName('p'))[0];
    //alert(p.innerHTML);
    
    $('input[type="button"]').click(function(){
        //$('.txt').val('ccc');//对应jquery找到一组元素执行操作为全部操作 全部改为ccc
        //alert($('.txt').attr('alt'));
        //$('.txt').attr('alt','ccc');
        //alert($('p').text());
        //$('p').html('123');
        //$('p').css('color','red');
        //$('p').css('font-size','30px');
        $('.divtxt').css('width','300px');
        $('.divtxt').css('height','300px');
        $('.divtxt').css('background-color','#d3ccd9');
    });
 });
 //ready方法需要一个整数做参数，而test方法的返回值就是整数，
                         //我们将test方法调用放在ready方法参数位表示，将返回值给ready用
                         //如果test方法只为了ready的调用而存在,干脆放在ready的参数位申明,
                         //没有名字

</script>
</head>
<body>
<div class="divtxt">
</div>
  <input type="button" name="btn" value="click"/>
  <input type="text" alt="txt" id="txt" name="txt" class="txt" value="aaa"/>
  <input type="text"  name="txt" class="txt" value="bbb"/>
  
  <p class="p"><span>2222</span></p>
  
</body>
</html>
  • JQuery导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .navi {width:1000px; margin-left:auto;margin-right: auto;height:24px;line-height: 24px;}
    .navi > ul{width:1000px;margin:0;padding:0;margin-left:auto;margin-right: auto;height:24px;
    text-align: center;}
    .navi > ul > li{float: left;width:198px;height:100px;color:white;
    list-style-type: none;margin-left:2px;font-family: "微软雅黑";font-size: 14px;}
    .navi > ul > li > span{width: 198px;height:24px;display: inline-block;background-color: #abe0ab;}
    .submenu {width:198px;margin:0;padding:0;margin-left:auto;margin-right: auto;height:24px;
    text-align: center;display: none;}
   .submenu > li{width:198px;height:24px;background-color: #caecca;color:white;
    list-style-type: none;margin-top:1px;font-family: "微软雅黑";font-size: 14px;}
   .submenu > li > a{color: white;text-decoration: none;}
</style>
<script type="text/javascript" src="../../tools/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
    //1. 使用点击事件  
    //1. $('.navi > ul > li').click(function(){
    //1. var state = $(this).children('.submenu').css('display');
    //1. $('.submenu').css('display','none');//关闭所有二级菜单
    //1. if(state == 'none'){
    //1.    $(this).children('.submenu').css('display','block');
    //1. }else{
    //1.    $(this).children('.submenu').css('display','none');
    //1. }
    //1. });
    
    //2. 使用toggle方法 奇偶次点击 
    //2. $('.navi > ul > li').click(function(){
    //2.    $(this).children('.submenu').toggle();
    //2. });
    
    //3. 鼠标移入移出
     $('.navi > ul > li').hover(function(){
          $(this).children('.submenu').css('display','block');
       },function(){
          $(this).children('.submenu').css('display','none');
      });
});
</script>
</head>
<body>
<div class="navi">
 <ul>
  <li><span>首页</span></li>
  <li><span>校园风光</span>
   <ul class="submenu">
    <li><a href="#">无镜湖</a></li>
    <li><a href="#">樱花路</a></li>
    <li><a href="#">图书馆</a></li>
   </ul>
  </li>
  <li><span>新闻中心</span>
   <ul class="submenu">
    <li><a href="#">校内新闻</a></li>
    <li><a href="#">国内新闻</a></li>
    <li><a href="#">国际新闻</a></li>
    <li><a href="#">新闻一角</a></li>
   </ul>
  </li>
  <li><span>联系我们</span></li>
  <li><span>关于我们</span></li>
 </ul>
</div>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,736评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,167评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,442评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,902评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,302评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,573评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,847评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,562评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,260评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,367评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,016评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2赞 269

推荐阅读更多精彩内容