正文 

当前位置： 首页 > 开发 > java教程

jquery(代码片段)

author author     2022-12-18     486

关键词：

1.为什么使用jQuery 
使用js写代码时，会遇到一些问题
1.window.onload事件有事件覆盖的问题，因此只能写一个事件。
2.代码容错性能差。
3.浏览器兼容性问题。
4.书写繁琐，代码量多。
5.代码很乱，各个页面到处都是。
6.动画效果很难实现。

2.jQuery对象

jquery是一个全局函数，当调用$()，内部会帮我们new jQuery(),创建一个jQuery对象
创建出对象后，可以使用对象的属性和方法
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //自执行函数--自动调用
        (function add() 
            return console.log(2);
        )();
        console.log("jQuery---",jQuery);
        console.log("$---",$);
        console.log("$(‘.box‘)---",$(‘.box‘));
    </script>

</body>
</html>

技术图片

3.入口函数

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        console.log($(document));
        //1.文档资源加载完成后调用此方法
        $(document).ready(function () 
            console.log(1);
        );
        //2.jquery简便写法入口函数
        $(function () 
            console.log(2);
        );
        //3.图片资源加载完成后调用
        $(window).ready(function () 
            console.log(3);
        );
    </script>

</body>
</html>

技术图片

4.jquery对象和js对象转换

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box"></div>
<div id="box2"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () 
            //如果是js对象，更加希望转换为jquery对象才能更简便的操作dom
            //因为js包含jquery,jquery只是封装DOM事件、ajax动画。
            //总结：
            // 1.如果是jquery对象，一定要调用jquery的属性和方法
            //2.js对象要调用js的属性和方法
            //3.不要将两个对象混淆
            //4.在jquery中，大部分都是api(方法)，length和索引是它的属性。
            console.log("获取jquery对象-$(‘#box2‘)：",$(‘#box2‘));
            var div2 = document.getElementById(‘box2‘);
            console.log("获取js对象-document.getElementById(‘box2‘)：",div2);
            console.log("jquery对象转为js对象-$(‘#box2‘)[0]：",$(‘#box2‘)[0]);
            console.log("jquery对象转为js对象-$(‘#box2‘).get(0)：",$(‘#box2‘).get(0));
            console.log("js对象转换为jquery对象-$(div2)",$(div2));
        );
    </script>

</body>
</html>

技术图片

5.jQuery如何操作DOM

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">vita</div>
<div id="box2">lili</div>
<div>chaochao</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () 
            console.log("jquery的标签选择器-$(‘div‘)：",$(‘div‘));
            console.log("jquery的类选择器-$(‘.box‘)：",$(‘.box‘));
            console.log("jquery的id选择器-$(‘#box2‘)：",$(‘#box2‘));

            $(‘div‘).click(function () 
                console.log("this.innerText---",this.innerText);
                console.log("$(this).text---",$(this).text);
            );
        );
    </script>

</body>
</html>

技术图片

6.jquery选择器

6.1层级选择器

技术图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul class="lists">
    <li>
        ul class=‘lists‘--li
    </li>
    <li>
        ul class=‘lists‘--li
    </li>

</ul>
<ul class="item">
    <li>
        ul class=‘item‘--li
    </li>
</ul>
<ul class="item2">
    <li class="item2-li">
        ul class=‘item2‘--li class=‘item2-li‘
    </li>
    <li>
        ul class=‘item2‘--li
    </li>
    <li>
        ul class=‘item2‘--li
    </li>
</ul>
<ul class="item3">
    <li class="item3-li">
        ul class=‘item3‘--li class=‘item3-li‘
    </li>
    <li>
        ul class=‘item3‘--li
    </li>
    <li>
        ul class=‘item3‘--li
    </li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () 
            //1.后代选择器，修改样式属性
            $(‘.lists li‘).css(‘color‘,‘red‘);

            //2.子代选择器，亲儿子
            $(‘.item>li‘).css(
                ‘color‘:‘yellow‘,
                ‘background-color‘:‘red‘
            );

            //3.+紧邻选择器，只选择最挨着的兄弟
            $(‘.item2-li+li‘).css(‘color‘,‘green‘);

            //4.~兄弟选择器，选择后面的所有兄弟
            $(‘.item3-li~li‘).css(‘color‘,‘blue‘);
        );

    </script>

</body>
</html>

技术图片

6.2基本过滤选择器

技术图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<ul class="item">
    <li>
        $(‘.item li:eq(0)‘).css(‘background‘,‘red‘)
    </li>
</ul>
<ul class="item2">
    <li class="item2-li">
        $(‘.item2 li:lt(1)‘).css(‘color‘,‘red‘);
    </li>
    <li>
        ul class=‘item2‘--li
    </li>
    <li>
        $(‘.item2 li:gt(1)‘).css(‘color‘,‘green‘);
    </li>
</ul>
<ul class="item3">
    <li class="item3-li">
        $(‘.item3 li:even‘).css(‘color‘,‘blue‘)
    </li>
    <li>
        $(‘.item3 li:odd‘).css(‘color‘,‘yellow‘);
    </li>
    <li>
        $(‘.item3 li:even‘).css(‘color‘,‘blue‘)
    </li>
</ul>
<ul class="item4">
    <li class="item4-li">
        $(‘.item4 li:first‘).css(‘background‘,‘yellow‘)
    </li>
    <li>
        ul class=‘item4‘--li
    </li>
    <li>
        $(‘.item4 li:last‘).css(‘background‘,‘green‘)
    </li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () 
            $(‘.item li:eq(0)‘).css(‘background‘,‘red‘);
            $(‘.item2 li:gt(1)‘).css(‘color‘,‘green‘);
            $(‘.item2 li:lt(1)‘).css(‘color‘,‘red‘);
            $(‘.item3 li:odd‘).css(‘color‘,‘yellow‘);
            $(‘.item3 li:even‘).css(‘color‘,‘blue‘);
            $(‘.item4 li:first‘).css(‘background‘,‘yellow‘);
            $(‘.item4 li:last‘).css(‘background‘,‘green‘);
        );

    </script>

</body>
</html>

技术图片

6.3属性选择器

技术图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="">
    <input type="text">
    <input type="password">
</form>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //属性选择器中最常用的方式
        $(function () 
            $(‘input[type=text]‘).css(‘background-color‘,‘green‘);
            $(‘input[type=password]‘).css(‘background-color‘,‘red‘);
        );

    </script>

</body>
</html>

技术图片

6.4筛选选择器

技术图片

jquery(代码片段)

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:$(“#test”).html();jquery的基础语法：$(selector).action()... 查看详情

textaccordian（jquery）(代码片段)

查看详情

学习jquery(代码片段)

jQuery学习本篇主要参考菜鸟教程jQuery安装BootCDN<scriptsrc="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">百度<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">jQuery语法通过jQuery,可以选 查看详情

markdown在wordpress中使用jquery代码片段(代码片段)

查看详情

jquery(代码片段)

jQuery对象jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。虽然jQuery对象是包装DOM对象... 查看详情

jquery快速入门(代码片段)

知识内容：1.jQuery大致了解2.jQuery基础语法3.jQuery事件4.jQuery动画效果5.jQuery补充 参考：http://www.cnblogs.com/liwenzhou/p/8178806.htmljQuery官网：https://jquery.com/jQuery中文文档：http://jquery.cuishifeng.cn/  &nbs 查看详情

jquery插件扩展方法(代码片段)

jQuery为扩展插件提拱了两个方法，分别是：jQuery.extend(object) —— 给jQuery对象添加方法。jQuery.fn.extend(object)—— 为扩展jQuery类本身.为类添加新的方法；  fn表示什么呢？下面代码是jQuery源代码中定义的fn：jQuery.... 查看详情

jquery(代码片段)

1.为什么使用jQuery使用js写代码时，会遇到一些问题1.window.onload事件有事件覆盖的问题，因此只能写一个事件。2.代码容错性能差。3.浏览器兼容性问题。4.书写繁琐，代码量多。5.代码很乱，各个页面到处都是。6.动画效果很难实... 查看详情

jquery简介(代码片段)

jQueryjQuery简介jQuery特点jQuery的使用方式jQuery与JavaScript的区别jQuery中的加载事件jQuery对象jQuery简介jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“writeless，domore”，倡导用更少的代码，做更多的事情。jQuery特... 查看详情

前端—jquery(代码片段)

什么是jQuery?jQuery是一个工具，简单方便实现DOM操作，python里可以叫模块，但在前端叫“类库“”jQUery我们在声明一个jQuery对象变量的时候在变量名前面加上$：var$variable=jQuery对像varvariable=DOM对象$variable[0]//jQuery对象转成D... 查看详情

jquery的安装(代码片段)

一.jQuery的安装下载jQuery有两个版本的jQuery可供下载：Productionversion-用于实际的网站中，已被精简和压缩。Developmentversion-用于测试和开发（未压缩，是可读的代码）以上两个版本都可以从 jquery.com 中下载。（https://jquery.com... 查看详情

jquery(代码片段)

jQuery为什么要用jQueryjs书写代码时,会遇到一些问题window.onload事件有事件覆盖的问题,因此只能写一个事件代码容错性差浏览器兼容性问题书写很繁琐,代码量多代码量乱,各个页面到处都是动画效果难以实现jQuery是什么jQuery是js的一... 查看详情

jquery总结(代码片段)

1.什么是jQuery？　　jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“writeLess，DoMore”，即写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作(DOM)... 查看详情

jquery入门(代码片段)

jQuery简介jQuery是一个快速、简洁的JavaScript框架jQuery设计的宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做更多的事情它封装JavaScript常用的功能代码，优化HTML文档操作、事件处理、动画设计和Ajax交互导入方式本地文件<scri... 查看详情

javascriptwpwrapper中的jquery(代码片段)

查看详情

jquery(代码片段)

whatisjQuery?jQueryisafast,small,andfeature-richJavaScriptlibrary.ItmakesthingslikeHTMLdocumenttraversalandmanipulation,eventhandling,animation,andAjaxmuchsimplerwithaneasy-to-useAPIthatworksacrossamu 查看详情

markdowngistembed示例：jquery(代码片段)

查看详情

html使用jquery(代码片段)

查看详情