Jquery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

下载jquery

下载网址：http://www.jq22.com/jquery-info122。在下载时，选择代码稳定的版本，这里我们选用2.1.4版本。
 
如何引入jquery？
在需要引入的html页面内使用<script><script>标签引入，引入格式是<script src="jquery文件存放的路径"></script>。注意引入后不要在里面写js代码，否则会无效，我们新建一个<script></script>标签在内部写代码。
 
jquery选择器
在jQuery中选择器可以分为九大选择器，分别为：基本、层级、简单、内容、可见性、属性、子元素、表单、表单对象属性。
 
基本选择器的使用
①通过id找对象 $("#id")；
②通过class找对象 $(".class");
③通过标签找对象 $("div");
 
层级选择器的使用
l ancestor descendant :后代选择器, 获取祖先下面的子孙元素

l parent>child : 子元素选择器,匹配父元素下面的指定的子元素
l prev + next : 相邻元素选择器 匹配当前元素的下一个兄弟元素 要求这两个元素必须是相邻的
l prev~siblings : 兄弟元素选择器 匹配当前元素下面的所有的指定的兄弟
 
实例：
//层级选择器

        //后代选择器

        var li = $("#box ul li")[2].innerHTML;

        console.log(li);
简单选择器的使用
l :first 匹配第一个元素
l :last 匹配最后一个元素
l :even 匹配下标值为偶数的所有元素
l :odd 匹配下标值为奇数的所有元素
l :eq(index) 匹配下标为指定值的元素
l :gt(index) 匹配下标大于指定值的所有元素
l :lt(index) 匹配下标小于指定值的所有元素
l :not(selector) 匹配除了指定选择器以外所有元素
 
//简单选择器

        var li = $("ul:first").html();//第一个

        console.log(li);

        var li = $("ul:last").html();//最后一个

        console.log(li);
属性选择器的使用
l l[attribute] 匹配指定属性的元素

l l[attribute=value] 匹配属性等于指定值的元素 input[name=username]
l l[attribute!=value] 匹配属性不等于指定值的元素
l l[attribute^=value] 匹配属性以指定值开头的元素
l l[attribute$=value] 匹配属性以指定值结束的元素
l l[attribute*=value] 匹配属性中包含指定值的元素
l l[selector1][selector2][selectorN] 任意多个属性选择器
var name = $('input[name="name"]').val();

        console.log(name);

表单选择器

l l:input 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea)
l l:text 匹配单行文本框
l l:password 匹配单行密码框
l l:radio 匹配单选按钮
l l:checkbox 匹配多选按钮 :submit 匹配提交按钮$(":submit") 
l l:reset 匹配重置按钮
l l:image 匹配图片按钮
l l:button 匹配普通按钮
l l:file 匹配文件上传
l l:hidden 匹配隐藏域 如果要匹配表单隐藏域一定要加上input标签 如：$(“input:hidden”)
 
//表单选择器

        var input = $(":text").val();

        console.log(input);

        var pwd = $(":password").val();

        console.log(pwd);
表单属性选择器的使用
l l:enabled 匹配表单控件可用的
l l:disabled 匹配表单控件不可用的
l l:checked 匹配被选中的 单选按钮和多选按钮
l l:selected 匹配被选中的 下拉列表
 

DOM对象和jquery对象
通过原生的找对象方式是dom对象，通过jquery方法找到的对象是jquery对象，jquery中包含有dom对象，DOM对象是以数组元素的方式添加在jQuery对象中。
 
 
DOM对象和jquery对象互相转换
function test(){

        //jquery对象中含有dom对象

        var obj = document.getElementsByTagName('div');//通过原生的找对象方式是dom对象

        console.log($(obj).html());//dom=>jquery 的一种方式 $(dom对象)；

        var obj = $("div");//通过jquery方法找到的对象是jquery对象

        console.log($(obj).get(0).innerHTML);//jquery=>dom 的第一种方法 $(jquery对象).get(下标)

        console.log($(obj)[2].innerHTML);//jquery=>dom 的第二种方法 $(jquery对象).[下标]

    }

两种方式实现表格隔行换色

<html>

    <meta charset="utf-8"/>

    <head><title>表格</title></head>

    <body>

        <button onclick="color()">原生换色</button>

        <button onclick="jcolor()">jquery换色</button>

        <table cellspacing=0 border=1>

            <tr>

                <td>111</td>

                <td>111</td>

                <td>111</td>

            </tr>

            <tr>

                <td>222</td>

                <td>222</td>

                <td>222</td>

            </tr>

            <tr>

                <td>333</td>

                <td>333</td>

                <td>333</td>

            </tr>

            <tr>

                <td>444</td>

                <td>444</td>

                <td>444</td>

            </tr>

        </table>

    </body>

</html>

<script type="text/javascript" src="Jqery2.1.4.js"></script>

<script type="text/javascript">

    function color(){

        //alert(1);

        var tr = document.getElementsByTagName('tr');

        //console.log(tr);

        //console.log(tr[1].innerHTML);

        for(var i =0;i<tr.length;i++){

            if(i%2==1){

                tr[i].style.backgroundColor="red";

            }

            if(i%2==0){

                tr[i].style.backgroundColor="blue";

            }

        }

    }

    function jcolor(){

        //alert(1);

        //简单选择器

        $("table tr:even").css("backgroundColor","green");//:even 匹配下标值为偶数

        $("table tr:odd").css("backgroundColor","pink");//:odd 匹配下标值为奇数

    }

</script>

效果：

原生换色

jquery换色

2019-07-31 Jquery的更多相关文章

  1. agentzh 的 Nginx 教程（版本 2019.07.31）

    agentzh 的 Nginx 教程(版本 2019.07.31) agentzh 的 Nginx 教程(版本 2019.07.31) https://openresty.org/download/a ...

  2. http://www.cnblogs.com/ycxyyzw/archive/2012/07/31/2616951.html

    http://www.cnblogs.com/ycxyyzw/archive/2012/07/31/2616951.html

  3. <2013 07 31> 没有必然的理由

    <2013 07 31> 没有必然的理由 没有必然的理由 人类从野蛮走向文明 也可能,从野蛮走向更野蛮 没有必然的理由 人群从疯狂走向理智 也可能,从疯狂走向更疯狂 没有必然的理由 你我从 ...

  4. 2019.07.05 纪中_B

    今日膜拜:czj大佬orz%%% 2019.07.05[NOIP提高组]模拟 B 组 今天做题的时候大概能判断出题人的考点,可是就是没学过...特别痛苦 T0:栈的定义,模拟就好了T1:感觉像是找规律 ...

  5. 2019.07.09 纪中_B

    错失AK记 2019.07.09[NOIP提高组]模拟 B 组 明明今天的题都很水,可就是没蒟蒻. 写题的时候: T0一眼高精(结果没切)T1看到2啊8啊果断转二进制观察,发现都是左移几位然后空出的位 ...

  6. 2019.07.06 纪中_B

    今天的题看起来都很简单,结果就爆炸了 做题时:怎么都是图论??? 结果最后好多是DP(最恐怖的是还有我没学过的状压DP) 2019.07.06[NOIP提高组]模拟 B 组 做了两题(稍微腐败了一下) ...

  7. JQuery日记 5.31 JQuery对象的生成

    JQuery对象的生成 1 selector为不论什么可转换false的空值   返回空JQuery对象 2 selector为字符串   2.1 selector为html字符串或有id属性的标签 ...

  8. Cheatsheet: 2019 07.01 ~ 09.30

    Other Intro Guide to Dockerfile Best Practices QuickJS Javascript Engine Questions for a new technol ...

  9. JavaScript学习07（jQuery）

    jQuery 什么是JQuery jQuery 由 John Resig 于 2006 年创建.它旨在处理浏览器不兼容性并简化 HTML DOM 操作.事件处理.动画和 Ajax. 十多年来,jQue ...

  10. Cheatsheet: 2016 07.01 ~ 07.31

    Mobile What to Expect From Swift 3 Web A practical security guide for web developers Gulp Succinctly ...

随机推荐

  1. python移动目录下所有子目录文件到新的总目录

    python移动目录下所有子目录文件到新的总目录 import os import shutil def file(p):     p=p     z=os.listdir(p)     for i ...

  2. centos7.7离线安装nginx

    一.1.安装openssl,因为编译安装nginx需要指定openssl目录 mkdir /data/openssl -p cd /data/openssl wget https://www.open ...

  3. DFS_BFS（深度优先搜索 和 广度优先搜索）

    package com.rao.graph; import java.util.LinkedList; /** * @author Srao * @className BFS_DFS * @date ...

  4. mui或者uni退出app

    在安卓上可以使用 //1.1 var backButtonPress = 0; $.back = function(event) { backButtonPress++; if(backButtonP ...

  5. 【Excel】IF函数

    判断条件: 一版判断:1>2大于   1<2小于   1=2等于   1<>2不等于  1>=2 1<=2 交集:AND() 并集:OR() 多条件:以后补

  6. Pandas | 15 窗口函数

    为了处理数字数据,Pandas提供了几个变体,如滚动,展开和指数移动窗口统计的权重. 其中包括总和,均值,中位数,方差,协方差,相关性等.本章讨论的是在DataFrame对象上应用这些方法. .rol ...

  7. zabbix-钉钉报警媒介

    (1)第三方报警平台(钉钉) 先指定要发送的群,在群里创建机器人 添加机器人 可以参考   “说明文档” 创建测试文档 vim   ceshi.sh curl 'https://oapi.dingta ...

  8. ESA2GJK1DH1K基础篇: 来吧! 彻底了解一下MQTT

    首先你需要知道MQTT并不是什么高大上的事物,它只是一个软件,对就是一个软件.其实就是个TCP服务器 一,既然是TCP服务器,这个TCP服务器和咱平时做的有什么不一样呢. 首先,平时的时候咱做的TCP ...

  9. .net core + xunit 集成测试

    xunit地址:https://github.com/xunit/xunit 一.利用请求来测试接口,主要是测试webapi控制器方法 ①添加xunit项目 ,然后引用我们的主项目,nuget: Mi ...

  10. Vue.js 自定义组件封装实录——基于现有控件的二次封装（以计时器为例）

    在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...