jQueryHTML与插件

1.jQuery 事故机制

1.1        注册事故       

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

2. $("p").on({
3.     "click": function () {
4.          alert("点击了")
5.      },
6.      "mouseenter": function () {
7.          alert("移动了")
8.      }
9. })

复制代码

1.2        委托事故

delegate()方法为指定的元素（被选元素的子元素）添加一个或多个事故处理处罚步伐，并规定当这些事故发生时运行的函数

2. $("div").delegate("span", "click", function () {
3.     $("span").css("background-color", "pink")
4. })

复制代码

1.3        事故对象event

type:事故范例
which:触发该事故的鼠标按钮或键盘的键
target:事故发生的初始对象
data:传入事故对象的数据
pageX\pageY：事故发生时，鼠标位置的水平坐标\垂直坐标
1.4        each()方法

each()方法为每个匹配元素规定要运行的函数
jQuery.each()函数用于遍历指定的对象和数组
$.each(数组或对象，回调函数)

2. var arr = [1, 2, 3, 4]
3. $.each(arr, function (index, item) {
4.     console.log(index, item);
5. })
8. var obj = {
9.     name: "zs",
10.     age: 18
11. }
12. $.each(obj, function (key, value) {
13.     console.log(key, value);
14. })

复制代码

2.jQuery对HTML的设置与捕获

2.1        html()---设置或返回所选元素的内容

2.2        text()---设置或返回所选元素的文本内容

2.3        val()---设置或返回表单字段的值

2.4        attr()、prop()---获取和返回属性值

2. //html()
3. $("#btn2").click(function () {
4.     console.log($("p").html());
5. })
6. $("#btn5").click(function () {
7.    $("p").html("<span>11111111</span>")
8. })
10. //text()
11. $("#btn1").click(function () {
12.     console.log($("p").text());
13. })
14. $("#btn4").click(function () {
15.     $("p").text("1111111111")
16. })
18. //val()
19. $("#btn3").click(function () {
20.     console.log($("#btn3").val());
21.     $("#btn3").val("666")
22. })
23. //attr()
24. $("#btn7").click(function () {
25.     $("p").attr("class", "two")
26.      console.log($("a").attr("href", "www.jd.com"));
27. })

复制代码

3.jQuery对Html的页面尺寸利用

3.1width()        height()

设置或返回元素的宽度和高度，不包罗边框和表里边距
3.2innerWidth()        innerHeight()

返回元素的高度，包罗内边距
3.3outerWidth()        outerHeight()

返回元素的高度，包罗内边距和边框
3.4scrollTop()        scrollLeft()

设置或返回滚动条被卷出去的元素的高度和宽度
4.jQuery添加元素和删除元素

4.1append()

在被选元素的末了插入内容（仍旧在该元素的内部）
4.2prepend()

在被选元素的开头插入内容（仍旧在该元素的内部）
4.3after()        before()

after()在被选元素之后插入内容
before()在被选元素之前插入内容
4.4删除元素、内容

remove()---删除被选元素及其子元素（本身和子元素都删除了，本身已删除，以是不占位置）
empty()---从被选元素中删除子元素（只是把子元素删撤消了，本身没有删除，以是本身占位）
5.jquery.color.js的使用

（1）引入JS文件
jquery中的animate不支持变色，但是使用jquery.color.js，就可以变色，.color.js依赖于jquery
以是须要先引入jquery.js

2. //引入
3. <script src="./js/jquery-1.11.1.min.js"></script>
4. <script src="./js/jquery.color.js"></script>
6. <script>
7.     $("#btn").on("click", function () {
8.         $("div").animate({ "width": 200, "background-color": "red" }, 2000, function () {
9.             alert("动画结束")
10.         })
11.     })
12. </script>

复制代码

6.jquery.lazyload.js的使用

懒加载原理：欣赏器会主动对页面中的img标签的src属性发送哀求并下载图片。通过动态改变img的src属性实现。它可以延长加载长页面中的图片在欣赏器可视地域外，图片不会被载入，直到用户将页面滚动到它们所在的位置。

2. //引入文件
3. <script src="./js/jquery-1.11.1.min.js"></script>
4. <script src="./js/jquery.lazyload.js"></script>
6. <script>
7.      $("img").lazyload()
8. </script>

复制代码

7.jquery.ui.js的使用

2. //引入
3. <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css"/>
4. <script src="js/jquery-1.11.1.min.js"></script>
5. <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
8. //操作日期选择器    datepicker()
9. <input type="text"name="date"id="date"/>
10. <script
11.     $("#date").datepicker();
12. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。