jQuery
2016-02-01 14:37
603 查看
jquery是JavaScript的一个库,
选择器
选择页面的元素,分为: id选择器,类选择器,标签选择器,属性选择器
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
设置页面的内容
text("Hello world!") - 设置或返回所选元素的文本内容 html("Hello world!") - 设置或返回所选元素的内容(包括 HTML 标记) val("Hello world!") - 设置或返回表单字段的值
选择器
选择页面的元素,分为: id选择器,类选择器,标签选择器,属性选择器
$("#myDiv"); //选择id值为myDiv的页面元素 <div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div> $(".myClass");//选择class值为myClass的页面元素 <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> $("div");//标签为div的页面元素 <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 $("ul li:first") 每个<ul>的第一个<li>元素 $("div#intro .head")id="intro" 的<div>元素中的所有 class="head" 的元素事件方法:
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 $(selector).on("click",function) 绑定事件处理程序到当前选定的jQuery对象中的元素隐藏和显示
$(selector).hide(speed,callback);//隐藏 $(selector).show(speed,callback);//显示 隐藏和显示合二为一则为: $("button").click(function(){ $("p").toggle(1000);//隐藏或显示,参数为1000毫秒 });淡入淡出
$(selector).fadeIn(speed,callback);//淡入 $(selector).fadeOut(speed,callback);//淡出 $(selector).fadeToggle(speed,callback);//淡入或淡出 $(selector).fadeTo(speed,opacity,callback);//渐变为给定的透明度(值为0与1之间)滑动
$(selector).slideDown(speed,callback);//向下滑动 $(selector).slideUp(speed,callback); //向上滑动 $(selector).slideToggle(speed,callback);//向上或向下滑动动画
$(selector).animate({params},speed,callback); $("button").click(function(){ // 将left属性修改为250px, 向右滑动 $("div").animate({left:'250px'});//可以形成队列, 实现连续改动 });终止效果
$(selector).stop(stopAll,goToEnd);以上的callbask函数,是在整个动画100%执行完以后会执行的函数.
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); }); }); </script> <body> <button type="button">Hide</button> <p>This is a paragraph with little content.</p> </body>获取页面的内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
设置页面的内容
text("Hello world!") - 设置或返回所选元素的文本内容 html("Hello world!") - 设置或返回所选元素的内容(包括 HTML 标记) val("Hello world!") - 设置或返回表单字段的值
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 表格标签table深入了解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- WEB标准网页布局中尽量不要使用的HTML标签
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作