初识jquery

Posted 2020-11-21 sfha

1.Jquery能做什么

         访问和操作DOM元素（注册事件，设置样式）

        l控制页面样式

        对页面事件进行处理

        扩展新的jQuery插件（高级内容）

   与Ajax技术完美结合（S2最后易买网ajax） 

 

2.Jquery的优势

 体积小，压缩后只有100KB左右

 强大的选择器

 

 出色的DOM封装

 可靠的事件处理机制

 出色的浏览器兼容性

 使用隐式迭代简化编程

 丰富的插件支持 

 

3.Jquery主要三个版本

 

  Compressed：压缩版  ：在发布的时候使用min

  unCompressed：非压缩版 

  Vsdoc：注释版：在开发阶段

 

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

 

 第一点：执行时机

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

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

第二点：执行次数

Window.onload只能调用一次

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

 

 

5.通过Jquery设置样式

 

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

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

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

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

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

 

 

JQuery语法结构

JQuery语句主要包含三大部分：$(),doucment和ready().

这三大部分在JQuery中分别被称为工厂函数，选择器和方法。

$()=JQuery()

当$()的参数是DOM对象时，该对象不需要使用双引号包裹起来，如果获取的是doucment对象，则写作$(doucment).

$(function () {
            $("li").mousemove(function () {
                $(this).css("background","red");
            }).mouseout(function () {
                $(this).css("background","");
            })
        })
自动迭代

DOM对象和JQuery对象转换

onload = function () {
            var $dom = $("#myid");
            var dom = $dom[0];
            dom.onclick = function () {
                if(dom.checked==true){
                    alert("成功");
                }
            }
        }

 

 

可以将DOM对象转换成JQuery对象，以使用JQuery提供的丰富功能，也可以将JQuery对象转换成DOM对象，使用DOM对象特有的成员提供的功能。

JQuery选择器

基本选择器

主要包括：标签选择器，类选择器，ID选择器，并集选择器，交集选择器和全局选择器。

$("p").click(function(){

　　$("span").css(”background“,"#FF6")

})；

层次选择器：

后代选择器，子选择器，相邻选择器，和同辈选择器。

$("h2").click(function(){

　　$("#menu span").css(”background“,"#FF6")；

})；

单击h2元素时，为#menu下的span元素添加色为#FF6的背景颜色的功能

$("h2").click(function(){

　　$("body span").css(”background“,"#FF6")；

$("body>span").css(”background“,"#FF7")；

})；

属性选择器

$("h2").click(function(){

　　$("h2[title]").css(”background“,"#FF6")；

})；

 

 

单击h2元素时,为包含属性名为title的h2元素添加颜色为#FF6的背景颜色的功能。

基本过滤选择器

:first 选取第一个元素

：last 选取最后一个元素

：even选取索引是偶数的所有元素（index从0开始）

：odd选取索引是奇数的所有元素（index从0开始）

：gt（index）选取索引大于index的元素（index从0开始）

：eq（index）选取索引等于index的元素（index从0开始）

：lt（index）选取索引小于index的元素（index从0开始）

：header 选取所有标题元素，如h1-h6

：focus 选取当前获取焦点的元素

$("tr:even").css("background-color","#F63");

 可见性过滤选择器

：visible 选取所有可见的元素

：hidden 选取所有隐藏的元素