jQueryHTML与插件

jQuery 事件机制

 

（1）、注册事件

bind() on() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数

$("#header1").bind({

mouseover(){

$(this).css("background-color","blue");

},

mouseout(){

$(this).css("background-color","black");

}

})

 $("p").on("click",function(){ alert("段落被点击了。"); });

 

bink()  on()  两种方法，基本差不多

 

委托事件

delegate()

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

$("div").delegate("p","click",function(){
    $("p").css("background-color","pink");
});

 

事件对象 event

event 对象有以下属性

type:事件类型，比如click

which:触发该事件的鼠标按钮或键盘的键

target: 事件发生的初始对象

data:传入事件对象的数据

pageX: 事件发生时，鼠标位置的水平坐标（相对于浏览器）

pageY: 事件发生时，鼠标位置的垂直坐标（相对于浏览器）

clientX: 事件发生时，鼠标位置的水平坐标（相对于可视窗口）

clientY：事件发生时，鼠标位置的垂直坐标（相对可是窗口）

 

each()方法 为每个匹配元素规定要运行的函数

 

jQuery.each()函数用于遍历指定的对象和数组

 

var arr = [1,2,3,4]

$.each(arr,function(index,item){

console.log(`我是第${index+1}元素，值为${item}`)

})

var obj = {

name:"lisi",

age:15

eat(){

return 1;

}}

 

$.each(obj,(key,value)=>{

console.log(`${key};${value}`);

})

 

 

jQuery 对HTML的设置与捕获

 

1.html()  设置或返回元素的内容（可以解析富文本）

 

$("#btn2").click(function(){

 alert("HTML: " + $("#test").html());

});

$("#btn2").click(function(){

$("#test2").html("<b>Hello world!</b>");

});

（2）text()  

设置或返回所选元素的文本内容  (不解析富文本)

$("#btn1").click(function(){

alert("Text: " + $("#test").text());

});

$("#btn1").click(function(){

$("#test1").text("Hello world!");

});

 

（3）val()

设置或返回表单字段的值

 

$("#btn1").click(function(){

alert("值为: " + $("#test").val());

});

$("#btn3").click(function(){

$("#test3").val("RUNOOB");

});

 

(4)    text()、html() 以及 val() 的回调函数

回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。

然后以函数新值返回您希望使用的字符串。

$("p").html(function(i,v){

console.log(i); //被选元素列表中当前元素的下标

console.log(v);//它自己所对应的值

})

 

（5）attr()   prop()

用于获取和返回属性值

 

prop()  :具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 

attr() :  可以返回（设置）元素的原生属性，还可以返回（设置）自定义属性。

 

jQuery 对HTML的页面尺寸操作

 

 

（1）width()  和 height()  方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

（2）innerWidth() 和 innerHeight()方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

（3）outerWidth() 和outerHeight() 

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

（4）outerWidth(true) 和outerHeight(true) 

outerWidth(true) 方法返回元素的宽度（包括外边距）。

outerHeight(true) 方法返回元素的高度（包括外边距）。

（5）scrollTop() 和 scrollLeft()

scrollTop() 设置或者返回滚动条被卷去的元素的高度

scrollLeft() 设置或者返回滚动条被卷去的元素的宽度

 

jQuery添加和删除元素

（1）append()         在被选元素的结尾插入内容

$("ol").append("<li>追加列表项</li>")

（2）prepend()        在元素的开头插入内容

这两种是添加 子元素

（3）after()    在被选元素之后插入内容  

$("img").after("<b>之前</b>")

　　  before()  在被选元素之前插入内容

这两个是添加兄弟元素

 

删除元素和内容

remove() 删除被选元素（及其子元素）

empty()  删除被选元素的子元素

 

jquery.lazyload.js  的使用

懒加载

<script src="../js/jquery.lazyload.min.js"></script>

<img alt="" class="lazy" width="640" height="480" data-original="images/load.jpg" style="margin-top:1000px;" />

$(function() {

      $("img.lazy").lazyload({

          event : "sporty"

      });

  });

   //当指定的元素已加载时，会发生 load() 事件

  $(window).bind("load", function() {

      var timeout = setTimeout(function() {

        //trigger() 方法触发被选元素上指定的事件以及事件的默认行为

          $("img.lazy").trigger("sporty")

      }, 5000);

  });

 

jquery.ui.js的使用

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。

 

 

，您需要在页面中引用这三个文件，以便使用 jQuery UI 的窗体小部件和交互部件：

 

         <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css" />

         <script src="js/jquery-1.11.1.min.js"></script>

         <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>

ECharts的使用

丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。