Java系列课程第三十八天 （jQueryHTML与插件）

Day38 jQueryHTML与插件

1、jQuery 对HTML的设置与捕获
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
(1)、html()
html() - 设置或返回所选元素的内容（包括 HTML 标记）。
$("#btn2").click(function(){
alert(“HTML: " + $(”#test").html());
});
$("#btn2").click(function(){
$("#test2").html(“Hello world!”);
});
(2)、text()
text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert(“Text: " + $(”#test").text());
});
$("#btn1").click(function(){
$("#test1").text(“Hello world!”);
});
(3)、val()
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert(“值为: " + $(”#test").val());
});
$("#btn3").click(function(){
$("#test3").val(“RUNOOB”);
});
(4)、text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return “旧文本: " + origText + " 新文本: Hello world! (index: " + i + “)”;
});
});
(5)、attr()、prop()
attr() 、prop()方法用于获取和返回属性值。
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){ alert((”#runoob").attr(“href”)); });
$(“button”).click(function(){ $("#runoob").attr(“href”,“http://www.runoob.com/jquery”); });
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()；.attr不仅可以返回（设置）元素的原生属性，还可以返回（设置）自定义属性。
2、jQuery 对HTML的页面尺寸操作
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery 尺寸：

(1)、width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
$(“button”).click(function(){
“div 的宽度是: " + $(”#div1").width() + “”;
“div 的高度是: " + $(”#div1").height(20);
});
(2)、innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
$(“button”).click(function(){
“div 宽度，包含内边距: " + $(”#div1").innerWidth();
“div 高度，包含内边距: " + $(”#div1").innerHeight();
});
(3)、outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
$(“button”).click(function(){
txt+=“div 宽度，包含内边距和边框: " + $(”#div1").outerWidth()
txt+=“div 高度，包含内边距和边框: " + $(”#div1").outerHeight();
});
(4)、scrollTop() 和 scrollLeft() 方法
scrollTop() 方法设置或者返回滚动条被卷去的元素的高度
scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){ alert((“div”).scrollTop()); });
3、jQuery添加元素和删除元素
(1)、append()方法
append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）
$(“ol”).append(“

• 追加列表项
• ”);
  (2)、append() 方法
  prepend() 方法在被选元素的开头插入内容。
  $(“ol”).prepend(“
• 追加列表项
• ”);
  (3)、after() 和 before() 方法
  jQuery after() 方法在被选元素之后插入内容。
  jQuery before() 方法在被选元素之前插入内容。
  $(“img”).before(“ 之前”);
  $(“img”).after(“ 之后”);
  (4)、删除元素/内容
  remove() - 删除被选元素（及其子元素）
  empty() - 从被选元素中删除子元素
  empty()仅仅删除元素的文本,占有位置，不显示在页面，但是DOM节点并没有删除
  remove()把整个dom节点删除掉，，不占有位置
  4、jquery插件的认识
  (1)、插件
  jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
  jquery有着丰富的插件，使用这些插件能给jquery提供一些额外的功能。
  5、jquery.color.js的使用
  (1)、引入js文件
  jquery中的animate动画本身不支持变色，但是jquery.color.js弥补了这一缺陷。
  .color.js 依赖于 jQuery. 所以需要先引用jqueryjs：

  (2)、示例
  $(“button”).on(“click”, function () {
  $(“div”).animate({“width”:200,“background-color”:“red”},2000, function () {
  alert(“动画结束”);
  });
  });
  6、jquery.lazyload.js的使用
  (1)、引入js文件
  很多网站都会用到‘图片懒加载’这种方式对网站进行优化，即延迟加载图片或符合某些条件才开始加载图片。
  懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。它可以延迟加载长页面中的图片在浏览器可视区域外，图片不会被载入，直到用户将页面滚动到它们所在的位置。
  与图片预加载的处理方式相反，在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，尤其是移动端。浏览器将会在加载可见图片之后即进入就绪状态，在淘宝商品详情页、漫画网站很多图片的情况下还可以帮助降低服务器负担。

  (2)、示例
  
  $(function() {
  $(“img”).lazyload();
  });
  7、jquery.ui.js的使用
  (1)、jQuery UI是什么？
  jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。
  jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。
  (2)、引入
  下载zip包并解压，通常情况下，您需要在页面中引用这三个文件，以便使用 jQuery UI 的窗体小部件和交互部件：
  
  
  (3)、操作日期选择器
  一旦您引用了这些必要的文件，您就能向您的页面添加一些 jQuery 小部件。比如，要制作一个日期选择器（datepicker）小部件，您需要向页面添加一个文本输入框，然后再调用 .datepicker()，如下所示：
  
  $( “#date” ).datepicker();
  
  (4)、拖动
  允许鼠标拖动元素，在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。
  $(function() {
  $( “#draggable” ).draggable();
  });