11.20第13节课
来源:互联网 发布:邮件服务器软件价格 编辑:程序博客网 时间:2024/06/08 19:20
一、jQuery基础
jQuery 的理念是:write less,do more。
jQuery 极大的简化了 javascript 开发人员遍历HTML文档、操作 DOM 、处理事件、执行动画和开发 Ajax 的操作。
1.jQuery优势
1. 轻量级。压缩后可以保持在30kb左右。
2. 强大的选择器。可以使用CSS1-CSS3几乎所有选择器。
3. 出色的DOM操作的封装。
4. 可靠的事件处理机制。
5. 完善的Ajax。
6. 不污染顶级变量。jQuery只建立一个名为jQuery的对象,其所有的函数方法都在这个对象之下。
2.使用jQuery
jQuery 库文件一般有生产版和开发版。区别在于生产版经过了压缩,只有30kb左右,我们下载使用开发版就可以了。
使用时,在页面引入 jquery.js 库文件就可以使用了。
<script type="text/javascript" src="js/jquery.js"><script>
简单编写jQuery:
$(document).ready(function(){ alert(‘Hello jQuery’); });
window.onload方法和
链式风格
//等待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向上冒泡 });});
二、jQuery对象和DOM对象
1.jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。拥有jQuery里面的方法。
例如:
lg($(‘#dd’));
lg(document.getElementById(‘dd’));
jQuery对象中无法使用DOM对象的任何方法。
DOM对象也不能使用jQuery里面的方法。
2.JQuery对象和DOM对象的相互转换。
1、jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。
//第一种方法lg($('#dd'));lg($('#dd')[0]);//第二种方法lg($('#dd'));lg($('#dd').get(0));
2、DOM对象转化成jQuery对象。
只需要把DOM对象包装起来,既可以获得一个jQuery对象了。
var dd = document.getElementById('dd'); var $dd = $(dd); lg($dd);
三、jQuery选择器
1、基本选择器
2、层次选择器
3、过滤选择器
四、课堂练习
1、导航练习部分代码
<script src="./js/jquery.js" type="text/javascript"></script><script type="text/javascript"> $(document).ready(function(){ $('.level1 a').click(function(){ $(this).addClass('current').next().show(). parent().siblings().children('a').removeClass('current').next().hide(); return false; }); });</script>
2、品牌标签
<script type="text/javascript"> $(function(){ var $category = $('ul li:gt(5):not(:last)'); $category.hide(); var $toggleButton = $('div.showmore>a'); $toggleButton.click(function(){ if($category.is(':visible')){ $category.hide(); $(this).find('span').css('background','url(img/down.gif) no-repeat 0 0').text('显示全部品牌'); }else{ $category.show(); $(this).find('span').css('background','url(img/up.gif) no-repeat 0 0').text('隐藏部分品牌'); } return false; }); });</script>
- 11.20第13节课
- C#的第13节课
- d第51页第13题
- 第1章 第13题
- 读书笔记 《第一行代码》 第13章
- javaSE 第77节课
- 11.8第6节课
- 11.9第7节课
- 11.16第12节课
- 11.21第14节课
- 11.22第15节课
- 11.23第16节课
- 11.27第17节课
- 第13章:并发
- 第13章 并发
- 第13章 滚动
- 第13周总结
- 第13周 比较
- 对话框(1)
- fiddler进行弱网测试
- PHP面向对象(常用)
- java的native方法
- python之字符串格式化(format)
- 11.20第13节课
- MongoDB基本命令用法
- 利用 TensorFlow 实现排序和搜索算法
- 单链表实现队列链式存储
- SQLiteException: unrecognized token:
- LeetCode--Symmetric Tree
- 100+大数据开源处理工具汇总
- java学习一站式资料下载(项目源码及视频)
- Java使用线程池和线程工厂