jQuery 编程

最新推荐文章于 2023-09-22 21:27:05 发布
最新推荐文章于 2023-09-22 21:27:05 发布
阅读量303 收藏 1
点赞数
分类专栏： 基本代码总结 文章标签： jquery dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baobaoxiong_123456/article/details/75092991
版权

jQuery编程

jQuery简介

jQuery的引入：就是一个是js类库,对常用的方法和对象进行封装,方便使用.

1. DOM编程:var obj = Document.getElementById(id); 此处获取的obj是什么对象---dom对象
2. 如果想使用Jquery中里面已经封装好的一些方法和属性的的话,首先获取变迁的jQuery对象,然后通过里面封装的一些方法和属性对jQuery对象进行操作

jQuery的使用：将jQuery.js文件通过src引入到html文件中，
这里写的是相对路径。

<script src="js/jquery-1.11.0.min.js"></script>

获取jQuery对象方法

  1. 通过dom获取对象：
    var obj=document.getElementById(“id”); – 获取的obj是一个dom对象；
  2. 通过jQuery获取对象：
    $(“选择器”)===>获取元素 – 获取的是标签元素对应的jQuery对象

  3. dom对象和jquery对象之间的转换

    dom对象===>jquery对象   
    $(dom对象)

jquery对象===>dom对象
    方式1:
        jquery对象[index]
    方式2:
        jquery对象.get(index)

页面加载

js:
        window.onload=function(){}//在一个页面中只能使用一次

    jquery 在一个页面中可以使用多次
        方式1:
            $(function(){...})
        方式2:
            $(document).ready(function(){});

<script type="text/javascript" src="js/jquery-1.11.0.min.js">
    </script>

    <script type="text/javascript">
        $(function(){
        //选择id为d1的标签，然后设置动画
            $("#d1").slideUp("slow").slideDown("slow");
        })

    </script>

    <body>
        <div id="d1">
            <p>
                一些内容<br />
                一些内容<br />
                一些内容<br />
                一些内容<br />
                一些内容<br />
                一些内容<br />

            </p>

        </div>
    </body>

jQuery选择器

基础选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js">
    </script>

    <script type="text/javascript">

        /*
         * 基础选择器
         * id选择器   #id
         * 类选择器   .class   (必须有class属性)
         * 标签选择器   element
         * 通用选择器   *  选择所有的标签
         */

        $(function(){
            //选择id为d1的标签，然后设置动画
            //$("#d1").slideUp("slow").slideDown("slow");

            //标签选择器，给所选择的标签加背景色
            //$("div").css("background-color","bisque");

            //类选择器
            //$(".dd").css("background-color","bisque");

            //通用选择器,body是最大的标签
            $("*").css("background-color","bisque");
        })
    </script>

    <body>
        <div id="d1">
            <p>
                一些内容<br />
                一些内容<br />
                一些内容<br />
                一些内容<br />
                一些内容<br />
                一些内容<br />
            </p>
            <input type="text" id="username" value="input conte" />
        </div>
        <div>div11111</div>
        <div> div22222</div>
        <div class="dd" >div has class....</div>
    </body>
</html>

层次选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js">
    </script>
    <script type="text/javascript">

        $(function(){
            //选择form下的所有Input后代标签
            //$("form input").css("background-color","aquamarine");

            //选择form下面的所有子集 input 
            //$("form>input").css("background-color","aquamarine");

            //选择form的兄弟标签input
            //$("form+input").css("background-color","aquamarine");

            //选择input标签的同辈所有标签
            $("form~input").css("background-color","aquamarine");
        })
    </script>

    <body>
        <form>
            <label>Name:</label>
            <input name="name" />
            <fieldset>
                <label>Newsletter:</label>
                <input name="newsletter" />
            </fieldset>
            <input type="button" value="click" />
        </form>
        <input name="none" />
        <div>
            <input type="text" value="text content" />
        </div>

    </body>
</html>

基础过滤选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">

        $(function(){
            //选择第一个元素
            //$("li:first").css("font-size",30);

            //选择最后一个元素
            //$("li:last").css("font-size",30);

            //选择奇数元素
            //$("li:odd").css("font-size",30);

            //选择偶数元素
            //$("li:last").css("font-size",30);

            //索引大于的元素
            $("li:gt(3)").css("font-size",30);
        })

    </script>
    <body>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
    </body>
</html>

内容过滤选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

    <script type="text/javascript">
        $(function(){
            //选择包含John的元素
            //$("div:contains('John')").css("color","red");

            //div内容为空的标签
            //$("div:empty").html("hahahah").css("background-color","aqua");

            //p的父节点
            //$("p:parent").css("background-color","aqua");

            //有
            $("div:has(p)").css("background-color","aqua");

        });
    </script>
    <body>
        <div>John Resig</div>
        <div>George Martin</div>
        <div>Malcom John Sinclair</div>
        <div>J. Ohn</div>
        <div></div>
        <div>
            <p id="p1">小屁孩</p>
        </div>
    </body>
</html>

属性过滤选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js">
    </script>

    <script type="text/javascript">

        $(function(){
            $("div[id]").css("background-color","aqua");

            $("div[id=d1]").css("background-color","red");
        });
    </script>
    <body>

        <div id="d1">哈哈哈哈</div>
        <p>一个陌生女人的来信</p>
        <div id="test2">西安天气好热</div>
    </body>
</html>

jQuery中的dom操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js">

        </script>
        <script type="text/javascript">
            //dom操作的元素追加
            $(function(){
                /*
                 //这四个方法是在元素的内部添加dom元素
                $("p").append("<b>想吃冰淇淋</b>");
                $("p").prepend("<b>我想告诉你，</b>");

                $("#dd").appendTo("p");
                $("#dd").prependTo("p");
                */

                //这个是在元素的外面添加dom元素
                $("p").insertAfter("div");
            });
        </script>
    </head>
    <body>

        <p>西安天气真热 </p>
        <div id="dd" style="background-color: red;">
            空调怎么不制冷？？？
        </div>
    </body>
</html>

jQuery的事件处理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js">
        </script>
        <script type="text/javascript">
            $(function(){

                /*$("#t1").blur(function(){
                    alert("这么小");
                })*/

                /*
                $("#t1").focus(function(){
                    alert("我要改内容");
                })*/

                $("#t1").mousedown(function(){
                    alert("别松开")
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="t1" value="小屁孩" />
        <input type="text" name="i1" id="i1" value="哈哈哈" />
    </body>
</html>

jQuery动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js">

        </script>
        <script type="text/javascript">
            $(function(){
                $("marquee").fadeOut(3000).fadeIn(2000);
            });
        </script>
    </head>
    <body>
        <div id="dd">
            <marquee>aaaaa</marquee>
        </div>
    </body>
</html>

jQuery表单验证

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js">

        </script>
        <script type="text/javascript" src="js/jquery.datepick.js">

        </script>
        <script type="text/javascript" src="js/jquery.validate.min.js">

        </script>


    </head>
    <script type="text/javascript">

        $("input[name=birth]").datepick({dateFormat:"yy-mm-dd"});
        $(function(){
            $("#formTest").validate({
                rules:{
                    realname:{
                        required:true
                    },
                    password:{
                        required:true,
                        minlength:3,
                        maxlength:10
                    },
                    repassword:{
                        equalTo:"input[name=password]"
                    },
                    gender:{
                        required:true
                    },
                    mail:{
                        required:true
                    }
                },
                messages:{
                    realname:{
                        required:"名字必填"
                    },
                    password:{
                        required:"密码必填",
                        minlength:"最少是3个",
                        maxlength:"最多为10列"
                    },
                    repassword:{
                        equalTo:"两个密码必须一致"
                    },
                    gender:{
                        required:"性别必填"
                    },
                    mail:{
                        required:"邮箱必填"
                    }

                }
            })
        })
    </script>
    <body>
        <div id="main">
            <form id="formTest" action="动画.html">
                用户名<input type="text" name="realname" /><br />
                密码<input type="password" name="password" /><br />
                确认密码<input type="password" name="repassword"/><br />
                性别<input type="radio" name="gender" />男<input type="radio" name="gender" />女
                <label for="gender" style="display:none" class="error">性别必填</label>
                <br />
                出生日期<input type="date" name="birth" /><br />
                邮箱<input type="text" name="mail" />
                <input type="submit" value="提交" />
            </form>
        </div>

    </body>
</html>
wangying28___
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery编程基础
weixin_55743273的博客
01-22 430
文章目录前言一、jQuery是什么？二、使用步骤1.引入库2. 用入口函数3. 基础选择器4. 层级选择器三、 优点 前言 jQuery 是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less， Do More”，即倡导写更少的代码 做更多的事情 一、jQuery是什么？ jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。 jquery设计的宗旨是“write Less，Do Mo
jQuery高级编程
09-01
《jQuery高级编程》从开发人员的层次对iQuery提供了一个全面的介绍。另外还深入介绍了iQuery的很多高级特性。, , 在《jQuery高级编程》第1部分中，深入介绍了iQuery的基础知识、介绍了如何选择或操作DOM元素，以及...
【前端开发---jQuery】想要快速入门JQuery？看这一篇文章就够了，笔记够详细，可以收藏学习。
最新发布
m0_67844671的博客
09-22 264
jQuery快速入门，用jQuery框架款速高效的操作DOM，让开发效率提高好几倍；知识点包括JQuery入门，jQuery操作DOM，jQuery事件，jQuery函数，JQuery动画等等；
Java基础29-JavaWeb(09)【JQuery】
小管博客空间站
12-05 246
JQuery 1 什么是JQuery jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。 学习jQuery本质： 就是学习调用这些函数（方法）。
入门JQuery编程
m0_63302973的博客
12-31 180
jquery
Jquery高级编程(一)【50个高级jQuery代码开发技巧】
极客神殿
05-22 5297
1.创建一个嵌套的过滤器.filter(&quot;:not(:has(.selected))&quot;) //去掉所有不包含class为.selected的元素2.重用你的元素查询var allItems = $(&quot;div.item&quot;); var keepList = $(&quot;div#container1 div.item&quot;); &lt;div&gt;class names: $(formToLook
jQuery编程笔记
11-13
从jQuery的概述开始，包含jQuery选择器，包装集操作，DOM编程，事件编程，jQuery与ajax集成，常用的工具API，jQuery插件开发，内核研究以及常用插件知识。
jQuery编程中的一些核心方法简介
10-23
主要介绍了jQuery编程中的一些核心方法,jQuery是当下人气最高的JavaScript库,需要的朋友可以参考下
jquery高级编程
11-21
jquery高级编程文档，学习文档，学习文档，学习文档。
jQuery常用编程案例
Zijian Su的博客
02-10 326
文章目录jQuery实现全选，反选和取消按钮基于DOM来实现反选基于jQuery的写法基于jQuery（使用三元运算符） jQuery实现全选，反选和取消按钮 以下是要操控的HTML代码 <input type="button" value="全选" onclick="selectAll()"/> <input type="button" value="取消" oncli...
jQuery开发框架--（一）jQuery简介
Leo的博客
05-20 5843
jQuery开发框架--（一）jQuery简介一. jQuery提供了两种版本：jQuery1.x：所有浏览器都支持；jQuery2.x：除了IE都支持。【范例】编写第一个jQuery程序。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&
jQuery编程的最佳实践
weixin_34144450的博客
03-23 131
好像是feedly订阅里看到的文章，读完后觉得非常不错，译之备用，多看受益。 加载jQuery 1.坚持使用CDN来加载jQuery，这种别人服务器免费帮你托管文件的便宜干嘛不占呢。点击查看使用CDN的好处，点此查看一些主流的jQuery CDN地址。 &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/li...
Jquery编程之核心函数
Hello World
12-24 489
很多javascript库使用 $ 作为一个函数或者变量名，正如jquery做的一样。在jQuery下$是jQuery的一个别名： A、jQuery( selector, [ context ] )说明：jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切 都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个 表达 式（通常由 CSS 选
jQuery第四天（隐式迭代【三种遍历方式】，链式编程，插件使用）
qfCSDN的博客
12-04 610
jQuery补充知识点 1.隐式迭代 1.1基本概念 隐式迭代：jQuery在设置属性时会自动的遍历，因此我们不需要再遍历 jQuery在执行设置性操作时，会给所有的元素都设置上相同的值。 jQuery在执行获取性操作时，只会返回第一个元素对应的值。 如果想要给每一个元素都设置不同的值，需要手动进行遍历jQuery对象。 1.2几种遍历方式 1.2.1 each方法 遍历jQuery对象集合，为每个匹配的元素执行一个函数 each可以用于遍历数组–数组是jq对象–列表 语法： $(selecto
jquery的链式编程
qq_39743131的博客
03-21 2600
一、jQuery的三种$()$号是jQuery“类”的一个别称，$()构造了一个jQuery对象。所以，“$()”可以叫做jQuery的构造函数。1、$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。比如：$("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的&lt;a/&gt;这个标签。如：$("...
jQuery链式编程的实现原理
qq_43294510的博客
03-14 5294
链式编程的实现原理 jQuery可以让我们开发者一直使用点语法调用自身方法的原理，主要原因是jQuery内部利用了js的对象来实现。 在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .语法(点语法)，一直写下去。 $(&quot;#box&quot;).css(&quot;background&quot;, &quot;pink&quot;).css(&quot;font-size&quo
JQ编程原理
庚中
01-16 241
案例:给元素添加自定义方法 普通写法: // 1.封装自执行函数给上面元素添加颜色的方法 (function(globel){ function Libary(selector,color){ let elements=document.getElementsByTagName(selector); ...
jQuery新手教程：12个jQuery编程常用技巧分享（二）
chelen_jak的专栏
02-15 717
转自：http://zzstudy.offcn.com/?p=12584 7、支持方法的连写 所谓连写，即可以对一个jquery对象连续调用各种不同的方法。例如： $(”p”).click(function(){alert($(this).html())}) .mouseover(function(){alert(’mouse over event’)}) .each(functio
（转）什么？你还不会写JQuery 插件
weixin_30650039的博客
11-07 922
原文地址：http://www.cnblogs.com/joey0210/p/3408349.html 前言　　 如今做web开发，jquery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个独立的...
jquery链式编程实例
06-07
好的，下面是一个 jQuery 链式编程的示例： 假设有一段 HTML 代码如下： ```html <li class="item">Item 1 <li class="item">Item 2 <li class="item">Item 3 ``` 我们可以使用 jQuery 的链式编程来进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值