24H免费课程咨询  TEL:13401595960   QQ:1870218756  微信:13401595960(李老师)

东方博宜

网站首页 > 软件开发资讯 > Java开发

【常州前端培训】JQuery入门学习笔记

2017-05-20 00:40:17 东方博宜 阅读

timg.jpg

1、jquery:javascript框架

框架:为了实现某个模式而设计的“半成品”!


jquery的插件库:基于jquery而设计的各类插件!

官方:http://plugins.jquery.com/

非官方:http://www.jq22.com/


jquery各类特效:http://sc.chinaz.com/tag_jiaoben/jquery.html


学习教程:http://www.w3school.com.cn/jquery/


页面特效:CSS3 + JQuery


2、jquery入门案例

注意:jquery的浏览器的兼容性

jquery的常见版本:https://code.jquery.com/

jquery的所有版本:https://code.jquery.com/jquery/


jquery 2.x以上的版本,要求的浏览器IE9+

jquery的不同版本之间语法是有略微差异性!

如:在jquery1.7中,live的语法,在jquery2.x中改成了on!


jquery = JavaScript + html + css


3、jquery的基本模式

$(选择器).事件(function(){


});


入门案例:

<h1 onClick="this.style.display='none'">jquery案例</h1>


<p>

  第一段落

</p>


<p>

  第一段落

</p>


<p>

  第一段落

</p>


<p>

  第一段落

</p>


<script src="js/jquery-1.7.2.js"></script>

<script>

   //当页面加载结束执行

   $(document).ready(function(){ 

       //p标签被点击则隐藏

  $("p").click(function(){ 

     //$("p").hide("slow");

 $(this).hide("slow");

  });

   });

</script>


总结:jquery的优势

a、从jquery出发寻找元素,然后绑定事件,从而实现了代码的分离(松耦合、非侵入式编程)

b、提供了各类特效,方便使用


问题:为什么代码要写在$(document).ready()中?

因为jquery是寻找网页中的元素,然后为元素绑定事件,因此一定要等网页中的元素加载结束,才能执行!


4、jquery要学习的知识点

A、选择器

B、事件

C、效果

D、动画

E、遍历:dom访问

F、修改html、css

G、jquery ajax


5、jquery的选择器

参考:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

A、css带的选择器

类型、群组、包含、类、ID、组合、伪类、通配……

* $("*") 所有元素

#id $("#lastname") id="lastname" 的元素

.class $(".intro") 所有 class="intro" 的元素

element $("p") 所有 <p> 元素

.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素


B、标记位置的选择器

:first 第一个

:last 最后一个

:even 偶数级的元素

:odd   奇数级的元素

:eq(index) 下标为index的元素

:gt(no)  下标大于某个编号的元素

:lt(no)    下标小于某个编号的元素

:not(选择器)   除了什么元素以外的其他元素


例子:利用jquery修改网页的css和元素的属性



注意:

a、修改元素的属性、获取元素的属性

修改:

$(选择器).attr("属性名","属性值");


获取:

var v = $(选择器).attr("属性名");


b、修改、获取元素的css

修改:

方式一:逐个修改

$(选择器).css("样式名","样式值");


方式二:一次修饰多个CSS

$(选择器).css({样式名:"样式值",样式名:"样式值"});


注意:方式二的写法中样式名,要用js的写法,比如:textAlign、fontSize


方式三:为元素增加class的值!

添加class:

$(选择器).addClass("class的值");


移除class:

$(选择器).removeClass("class的值");




获取:

var x = $(选择器).attr("样式名");


例子:

<style>

  .table_head{ 

      background-color:#06F;

 font-weight:bold;

 color:#FFF;

  }

  

  .row_even{ 

      background-color:#BBC1FF;

  }

  

  .row_mouseover{ 

      background-color:#FC6;

  }

</style>


<h1 id="biaoti">学员成绩单</h1>

<table class="score">

  <tr>

    <td>姓名</td>

    <td>语文</td>

    <td>数学</td>

    <td>物理</td>

  </tr>

  <tr>

    <td>张三</td>

    <td>98</td>

    <td>98</td>

    <td>98</td>

  </tr>

  <tr>

    <td>李四</td>

    <td>98</td>

    <td>98</td>

    <td>98</td>

  </tr>

  <tr>

    <td>王二</td>

    <td>98</td>

    <td>98</td>

    <td>98</td>

  </tr>

  <tr>

    <td>赵五</td>

    <td>98</td>

    <td>98</td>

    <td>98</td>

  </tr>

</table>



<script src="js/jquery-1.7.2.js"></script>

<script>


   //当页面加载结束执行

   $(document).ready(function(){ 

       $("#biaoti").attr("align","center");

  $("#biaoti").css("font-size","28px");

  $("*").css("font-family","微软雅黑");

  

  $(".score").attr("align","center");

  $(".score").attr("width","1000px");

  

  //逐个修饰元素的css

  $(".score , .score td").css("border","1px solid #333");

       $(".score tr").css("height","30px");

    

  //一次修饰多个元素的css

  $(".score").css({borderCollapse:"collapse",textAlign:"center",fontSize:"15px"});

  

  //为第一行添加class的值

  $(".score tr:first").addClass("table_head");

  

  //为偶数行添加class的值

  $(".score tr:even:not(:first)").addClass("row_even");

  

  //除了第一行以外添加鼠标经过样式和鼠标离开样式

  $(".score tr:not(:eq(0))").mouseover(function(){ 

     $(this).addClass("row_mouseover");

  });

  

  $(".score tr:gt(0)").mouseout(function(){ 

     $(this).removeClass("row_mouseover");

  });


   });

</script>


C、:contains(text):包含指定字符串的元素,一般要用选择器修饰一下

:empty:没有子元素的元素

:hidden:被隐藏的元素


D、属性选择器

[attribute] $("[href]") 所有带有 href 属性的元素

[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素

[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素

[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素


E、表单选择器

:input、 :text ....

:enabled  :disabled 有效的和失效的元素

:checked  checkbox或者radio中被选中的元素

:selected  下拉菜单中被选中的那一项


例子:全选、清空、提交时检验是否至少选了一项

  <table class="table table-bordered table-striped langs">

    <thead>

      <th style="width:20px;"><input type="checkbox"></th>

      <th>编程语言</th>

    </thead>

    <tbody>

      <tr>

        <td><input type="checkbox"></td>

        <td>C</td>

      </tr>

      <tr>

        <td><input type="checkbox"></td>

        <td>Java</td>

      </tr>

      <tr>

        <td><input type="checkbox"></td>

        <td>PHP</td>

      </tr>

      <tr>

        <td><input type="checkbox"></td>

        <td>JavaScript</td>

      </tr>

      <tr>

        <td><input type="checkbox"></td>

        <td>C++</td>

      </tr>

      <tr>

        <td><input type="checkbox"></td>

        <td>Python</td>

      </tr>

    </tbody>

  </table>

  

  <input type="button" value="提交" class="btn btn-primary"/>

  <span class="msg"></span>

  

  <script src="js/jquery-1.7.2.js"></script>

  

  <script>

     $(document).ready(function(){ 

    //当表格的th中的checkbox被点击时

$(".langs th :checkbox").click(function(){ 

    //获取当前checkbox的选中状态

var c = $(this).attr("checked");

//如果选中,则下面tbody中的checkbox也都要选中

if(c == "checked"){ 

   $(".langs tbody :checkbox").attr("checked","checked");

}else{ 

   $(".langs tbody :checkbox").removeAttr("checked");

}

});

 

//当提交按钮被点击时,检验tbody中的checkbox是否至少选了一项

$(":button[value='提交']").click(function(){ 

    //获取被选中的checkbox的数量

var x = $(".langs tbody :checkbox:checked").size();

if(x == 0){ 

   $(".msg").html("<span style='color:#F00'>请选择至少一项!</span>");

}else{ 

   $(".msg").html("<span style='color:green'>提交成功!</span>");

}

});

});

    

  </script>



注意:CSS的框架bootstrap,可以熟悉一下!

移除元素的属性:$(选择器).removeAttr(属性名);

获取满足条件的元素的数量:$(选择器).size();

修改、获取元素内部的html:

修改:

$(选择器).html("html的内容");


获取:

var n = $(选择器).html();


.text():.html()如果有html代码可以修饰为效果,.text()显示html代码,不修饰为效果!



标签:   常州jquery培训 常州前端培训
Powered by 东方博宜教育咨询江苏有限公司  ©2008-2017 www.czos.cn