标题被你吃了

Posted 2020-07-09 ☼柚子

 

 

Jquery能做那些事让是你很惊讶

访问和操作DOM元素;控制页面样式;对页面事件进行处理;扩展新的jQuery插件;与Ajax技术完美结合

Jquery的优势

 体积小，压缩后只有100KB左右; l强大的选择器; 出色的DOM封装; l可靠的事件处理机制; 出色的浏览器兼容性; 使用隐式迭代简化编程; 丰富的插件支持

jQuery的知识的分解：

1.关于window.onload和$(function(){})区别

 解析：window.onload等待页面上所有资源（html标签，css，img，js）都加载完成后，才执行，包括（文本素材，图片，js，css）

 $(function(){}):等待页面上的标签素材加载完成后就开始执行

第二点：

Window.onload只能调用一次

 $(function(){})可以调用多次

 2.怎么通过Jquery设置样式

 

1）.通过$(“选择器”).css(“属性名”,”属性值”);

 //这里的书写的属性名和css中书写的一致

 2）.$(“选择器”).html():获取两个标签之间的html代码

 3）.$(“选择器”).addClass(“属性值”)

 可以动态的改变dom文档结构。进而设置样式。

3.DOM对象和Jquery对象的转换

 jquery对象转换成 dom对象 jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)。

 

 1  $(function () {
 2                 var lis = document.getElementsByTagName(\'li\');
 3 
 4                 for (var i = 0; i < lis.length; i++) {
 5                     lis[i].onmouseover = function () {
 6                         this.style.background = \'red\';
 7                     };
 8                     lis[i].onmouseout = function () {
 9                         this.style.background = \'\';
10 
11                     }
12                 }
13             });

js

 

$(function () {
                $(\'li\').mouseover(function () {
                    $(this).css(\'background\',\'red\');
                }).mouseout(function () {
                    $(this).css(\'background\', \'\');
                })
            });
            

jQuery