当前位置: 首页>编程语言>正文

配置jquery代码 如何配置jquery环境

什么是JQuery?

 jQuery 是一个JavaScript库,是一个由John Resig创建于2006年1月的开源项目。jQuery 凭借着简洁的语法和跨平台的兼容性,极大简化了JavaScript 开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript 程序员的设计思路和编写程序的方式。简单地来说:

  •  jQuery 是一个优秀的 JavaScript 库。                  
  • jQuery 极大地简化了 JavaScript 编程。                
  • jQuery 很容易学习。

JQuery的优点

(1)轻量级。jQuery非常轻巧,经过最好的压缩工具UglifyJS(代码混淆)压缩之后,大小保持在30KB左右。

(2)强大的选择器。jQuery支持CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。

(3)出色的DOM操作的封装。jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序时能够得心应手。

(4)可靠地事件处理机制。jQuery的事件处理机制吸收了Javascript事件处理函数的精华,使jQuery在处理事件绑定的时候相当可靠。

(5)完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax时能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

(6)不污染顶级变量。jQuery 只建立一个名为jQuery 的对象,所有的函数方法都在这个对象之下。

(7)出色的浏览器兼容性。jQuery 几乎支持所有的主流浏览器,同时jQuery 还修复了一些浏览器之间的差异。

(8)链式操作方式。jQuery 最具有特色的莫过于他的链式操作方式——即同时发生在同一个jQuery 对象的一组动作,可以直接连写而无需重复获取对象。

(9)隐式迭代。当用jQuery 找到带有“.myClass”类的全部元素,然后隐藏他们时,无需循环遍历每一个返回的元素。相反,jQuery 里的方法都被设计成自动操作对象集合,这使得大量的循环结构变得不再必要,从而大量的减少了代码量。

(10)行为层和结构层的分离。开发者可以使用jQuery 选择器选中元素,然后直接给元素添加事件。这种将行为层和结构层完全分离的思想,可以使jQuery 开发人员和HTML或者其他页面开发人员各司其职。同时,后期维护也非常方便。

(11)丰富的插件支持。jQuery 的易扩张性,吸引了来自全球的开发者来编写jQuery 的扩展插件。目前已经有成百上千的官方插件支持,而且还不断地有新的插件面世。 

jQuery环境配置

jQuery不需要安装,只需将下载好的jQuery.js文件导入项目文件,想要在某个页面使用jQuery时,只需要在相关的HTML文档中引入该库文件的位置即可。

通常使用1.7或者1.9版本

要使用JQuery,需要先引用JQuery库,如下:

<head>

<script src="scripts/jQuery.js "   type="text/javascript"></script>

</head>

在文件中引用JQuery.js后就可以使用了

JQuery里面的顶级变量

首先需要知道的是JQuery中的顶级变量$ ,输出到控制台,可以看到$是一个函数,

配置jquery代码 如何配置jquery环境,配置jquery代码 如何配置jquery环境_jQuery,第1张

因此,$使用时可以  $(XXX) ,也可以  $.XXX

$(document).ready()函数            

 在编写一个jQuery代码时,必须以$(document).ready()开头,所有的jQuery代码都必须写在$(document).ready(){}里,格式如下:           $(document).ready(function(){              

                    //jQuery代码块

});                        

$(document).ready()括号中的所有代码都会提前执行,而不是在页面所有内容加载完毕之后才执行事件。它允许用户在第一眼看到元素时,就能立即看到元素产生的效果。            

为了书写简单,可使用$(function(){......})来代替$(document).ready()函数,作为它的缩写形式,缩写方式如下:              

$(function(){        

              //jQuery代码块

});

JQuery代码示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn"></button>
<script>
    $(document).ready(function (){
        $("#btn").html("按钮").css({
            backgroundColor:"red"
        }).click(function (){
            alert("1");
        });
    });
</script>
</body>
</html>

上面代码是非常简单的一个代码示例,操作button,修改button的HTML内容,添加背景色,添加点击事件等,可以看到其完善的事件处理机制,链式操作,隐式迭代以及强大的选择器。

在写jquery代码的时候注意元素的初始化问题

js里面的window.onload,在JQuery中是

$(document).ready(function () {

            /*代码*/

});

简写方式为

$(function () {

            /*代码*/

});

JQuery的选择器

jQuery选择器分为:基本选择器、层次选择器、过滤选择器和表单选择器4大类。在过滤选择器中又分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6类。

配置jquery代码 如何配置jquery环境,配置jquery代码 如何配置jquery环境_选择器_02,第2张

 

一、基本选择器:基本选择器是jQuery中使用最多的选择器,它又元素Id、class、元素名、多个元素符组成。

选择器

功能

返回值

#id

根据给定的ID匹配一个元素

单个元素

element

根据给定的元素名称匹配所有元素

元素集合

. class

根据给定的类匹配元素

元素集合

*

匹配所有元素

元素集合

selector1,selectorN

将每一个选择器匹配到的元素合并后一起返回

元素集合

二、层次选择器:层次选择器通过DOM元素间的层次关系来获取元素,主要的层次关系包括父子、后代、相邻、兄弟关系

选择器

功能

返回值

ancestor  descendant

根据祖先元素匹配所有的后代元素

元素集合

parent > child

根据父元素匹配所有的子元素

元素集合

prev + next

匹配所有紧接在prev元素后的相邻元素

元素集合

prev ~siblings

匹配prev元素之后的所有兄弟元素

元素集合

注意:siblings()方法与prev ~siblings的区别在于,前者获取所有的相邻元素,不分前后,后者仅获取标记元素后面所有的相邻元素,不能获取前面部分。

三、过滤选择器:过滤选择器是根据某类过滤规则进行元素的匹配,书写时都以(:)开头

简单过滤选择器:

选择器

功能

返回值

first()或 :first

获取第一个元素

单个元素

last()或:last

获取最后一个元素

单个元素

:not(selector)

获取除给定选择器外的所有元素

元素集合

:even

获取所有索引值为偶数的元素,索引号从0开始

元素集合

:odd

获取所有索引值为奇数的元素,索引号从0开始

元素集合

:eq(index)

获取指定索引值的元素,索引号从0开始

单个元素

:gt(index)

获取所有大于给定索引值的元素,索引号从0开始

元素集合

:It(index)

获取所有小于给定索引值的元素,索引号从0开始

元素集合

:header

获取所有标题类型的元素,如h1,h2,h3...

元素集合

:animated

获取正在执行动画效果的元素

元素集合

内容过滤选择器:

选择器

功能

返回值

:contains(text)

获取包含给定文本的元素

元素集合

:empty

获取所有不包含子元素或者文本的空元素

元素集合

:has(selector)

获取含有选择器所匹配的元素的元素

元素集合

:parent

获取含有子元素或者文本的元素

元素集合

可见性选择器:

选择器

功能

返回值

:hidden

获取所有不可见元素,或者type为hidden的元素

元素集合

:visible

获取所有的可见元素

元素集合

 

子元素过滤选择器:

选择器

功能

返回值

:nth-child(eq||even||odd||index)

获取每个父元素下的特定位置元素,索引号从1开始

元素集合

 

:first-child

获取每个父元素下的第一个子元素

元素集合

:last-child

获取每个父元素下的最后一个子元素

元素集合

:only-child

获取每个父元素下的仅有一个子元素

元素集合

表单对象属性过滤选择器:

                     

配置jquery代码 如何配置jquery环境,配置jquery代码 如何配置jquery环境_jQuery_03,第3张

四、表单选择器

配置jquery代码 如何配置jquery环境,配置jquery代码 如何配置jquery环境_html_04,第4张

 

下面代码是相关选择器的使用示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btn1"></button>
<ul>
    <li>水果</li>
    <li>蔬菜
        <ol>
            <li>西红柿</li>
            <li>黄瓜</li>
            <li>青菜</li>
        </ol>
    </li>
    <li class="li3">甜点</li>
    <li>饮料</li>
    <li>海鲜</li>
</ul>
<p></p>
<div>
    <span>小猫吃肉肉</span>
</div>
<input type="button" class="btninput" value="按钮1" style=" display: none;"/>
<input type="button" class="btninput" value="按钮2" />
<input type="checkbox" >
<input type="checkbox" checked>
<input type="radio" checked>男
<input type="radio">女
<input type="text">
<select>
    <option>西安</option>
    <option>渭南</option>
</select>
<script>
    //1.基本选择器
    console.log($("#btn"));//id选择器
    console.log($(".btn1"));//类名称选择器
    console.log($("*"));//选择所有元素
    console.log($("button"));//元素名称选择器
    //2.层次选择器
    console.log($("ul li"));//输出所有的li  包括ol下的li
    console.log($("ul>li"));//输出ul的li  不包括ol下的li
    console.log($(".li3+li"));//输出li3后面相邻的li  如果li3后面没有li  则输出为空  输出的innerHTML"饮料"
    console.log($(".li3~li"));//输出li3后面所有的li
    //3.过滤选择器
    //简单过滤
    console.log($("ul>li:first"));//输出第一个元素
    console.log($("ul>li:last"));//输出最后一个元素
    console.log($("ul>li:even"));//输出索引号为偶数的元素
    console.log($("ul>li:odd"));//输出索引号为奇数的元素
    console.log($("ul>li:gt(1)"));//输出所有索引大于给定元素索引值的元素
    console.log($("ul>li:lt(2)"));//输出所有索引小于给定元素索引值的元素
    console.log($("ul>li:eq(2)"));//输出给定索引值的元素
    console.log($("ul>li:not(.li3)"));//输出除给定选择器外的所有元素
    //内容过滤
    console.log($("li:contains('甜点')"));//输出给定文本的元素
    console.log($("p:empty"));//输出所有不包含子元素或文本的空元素
    console.log($("div:parent"));//输出含有子元素或文本的元素
    console.log($("div:has('span')"));//输出含有选择器所匹配的元素的元素
    //可见性选择
    console.log($(".btninput:visible"));//获取所有可见的元素   按钮2
    console.log($(".btninput:hidden"));//获取所有不可见的元素   按钮1
    //属性选择器
    console.log($("button[id][class]"));
    console.log($("button[id='btn'][class='btn1']"));
    //子元素过滤选择
    console.log($("ul>li:nth-child(2)"));//蔬菜
    console.log($("ul>li:first-child"));//水果
    console.log($("ul>li:last-child"));//海鲜
    console.log($("div>span:only-child"));//获取每个父级元素下的仅有一个子元素   小猫吃肉肉
    //表单元素属性过滤
    console.log($("input[type='checkbox']"));//输出所有类型为checkbox的元素  2
    console.log($("input[type='checkbox']:checked"));//1
    console.log($("input[type='radio']"));//输出所有类型为radio的元素  2
    console.log($("input[type='radio']:checked"));//1
    //4.表单选择器
    console.log($("input:checkbox"));//输出所有类型为checkbox的元素    2
    console.log($("input:radio"));//输出所有类型为radio的元素  2
    console.log($(":input"));//获取所有input  select  textarea
    console.log($("input:text"));//获取所有单行文本框
</script>
</body>
</html>

 


https://www.xamrdz.com/lan/5kq1957242.html

相关文章: