jQuery简单入门练习.docx

1、jQuery简单入门练习01 简单的jQuery程序Insert title here /DOM var username = document.getElementById(username); alert(username.value); /jQuery var $username = $(#username); alert($username.val(); 1.JQuery 要进行使用，导入外部的js文件2.jQuery的写法使用$作为标示符3.获取它的id，格式：$(“#id”);4.获取id的值，格式：.val();02 /DOM 对象转换成jQuery对象：$(DOM对象)Inse

2、rt title here var username = document.getElementById(username); /DOM 对象转换成jQuery对象：$(DOM对象) var $username = $(username); alert($username.val(); 1.在进行DOM 对象转换成jQuery对象，格式：$(DOOM对象)03 jQuery对象转换成DOM对象Insert title here /jQuery var $username = $(#username); /jQuery对象是数组对象：jQuery对象索引值 /jQuery对象转换成DOM对象 v

3、ar username = $username.get(0); alert(username.value); 1. 由于jQuery是数组对象：jQuery对象索引值2. Jquery就提供了一个get()方法获取其下标3. 转换完成之后，通过DOM提供的value属性，获取DOM的value的值04 对比事件处理机制Insert title here /DOM / var username = document.getElementById(username!);/ if(!username) / alert(id 不存在);/ else / alert(username.value);/

4、/jQuery var $username = $(#username111); alert($username.val();1.在jQuery事件处理机制方式中，如果没有这个值的时候会输出undefined01 基本选择器Insert title here / $(document).ready(function() $(#btn1).click(function() $(#one).css(background,yellow); ); / $(#btn2).click(function() /支持类似于批操作 $(.mini).css(background,yellow); ); / $(

5、#btn3).click(function() $(div).css(background,yellow); ); / $(#btn4).click(function() $(*).css(background,yellow); ); / $(#btn5).click(function() $(span,#two).css(background,yellow); ); ); 手动重置页面元素 点击下列按钮时先自动重置页面 基本选择器. id为one,class为one的div class为mini id为two,class为one,title为test的div. class为mini,titl

6、e为other class为mini,title为test class为mini class为mini class为mini class为mini class为mini class为mini class为mini,title为tesst style的display为none的div class为hide的div 包含input的type为hidden的div 正在执行动画的span元素.1.先进行引入js 和 各种各样的文件2.$(document).ready(function();3.在function里面进行onlick操作后进行4.$(#one).css(background,yell

7、ow);进行设置背景颜色02 层次选择器Insert title here $(document).ready(function() / /祖先元素与后代元素的关系 $(#btn1).click(function() $(body div).css(background,yellow); ); / /父子元素的关系 $(#btn2).click(function() $(bodydiv).css(background,yellow); ); / $(#btn3).click(function() $(one+div).css(background,yellow); ); / $(btn4).c

8、lick(function() $(#twodiv).css(background,yellow); ); / $(#btn5).click(function() $(#two).siblings(div).css(background,yellow); ); ); 层次选择器. 手动重置页面元素 点击下列按钮时先自动重置页面 id为one,class为one的div class为mini id为two,class为one,title为test的div. class为mini,title为other class为mini,title为test class为mini class为mini cla

9、ss为mini class为mini class为mini class为mini class为mini,title为tesst style的display为none的div class为hide的div 包含input的type为hidden的div 正在执行动画的span元素.1.祖先元素与后代元素的关系 body div2.父子元素的关系 bodydiv3.下一个div元素 #one+div4.div兄弟元素 #twodiv5.div兄弟元素 $(#two).siblings(div)03 基本过滤器选择器Insert title here $(document).ready(function() / $(#btn1).click(function() $(div:first).css(background,yellow); ); / $(#btn2).click(function() $(div:last).css(background,yellow); ) / $(#btn3).click(function() /获取class不为one的，包含没有class属性的 $(div:not(.one).css(background,yellow); ) /input type