自学之jQuery

最近在公司做项目的过程中，涉及到写前端部分，因为之前一直很少写前端，所以不是很熟悉，所以，在此写一下自学jQuery的过程，以及中途遇到的坑。

首先，要想使用jQuery必须先引入jQuery

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <script type="text/javascript">

            /*

            alert(222)

            window.onload = function(){

                //window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

                //如果不写window.onload() 代码的执行顺序 从上到下

                var oDiv = document.getElementById('box');

                console.log(oDiv);

            }

            */

        </script>

        <div id="box">

        </div>

    </body>

    <script src="./jquery-3.2.1.js"></script>

    <script type="text/javascript">

        //如果没有引入jquery ：$ is not defined

        console.log($)

        //jquery是js的一个库文件，既然是库文件，那么就会抛出来一个构造函数或者对象

        //$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕

        //书写jquery的方式  入口函数

        $(document).ready(function(){

            alert(111)

        })

        //等价

        $(function(){

            alert(222);

        })

    </script>

</html>

对，没错，就上面那个<script src="./jquery-3.2.1.js"></script>那个

如果说没有引入jQuery使用$就会报错，没有定义，如上面的代码。

 $(document).ready(function(){

            alert(111)

        })

这个一般用在初始化界面的时候调用，比如修改内容的时候，原来什么东西是隐藏的，就用这个，因为他是从页面加载的时候就存在的。

而下面的$(function){})就是上面的简写方式。

——————————————————————————————————————————————————————————————————————

下面是jQuery的选择器：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /*#brother{

                color: red;

                font-size:24px;

            }*/

        </style>

    </head>

    <body>

        <ul>

            <li id="brother">你大爷1</li>

            <li><a href="https://www.luffycity.com">你大爷2</a></li>

            <li class="li3">你大爷3</li>

            <li>你大爷4</li>

            <li>你大爷5</li>

        </ul>

    </body>

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

    <script type="text/javascript">

        //使用jquery的时候 要有入口函数 回调函数

        $(document).ready(function(){

            //基础选择器

            //1.id选择器

            console.log($('#brother'));

            $('#brother').css('color','red');

            //2.标签选择器

            //设置一个值

//            $('a').css('color','yellow')

//          设置多个值 设置多个值得时候使用对象存储 key:value

            $('a').css({'color':'yellow','font-size':'24px'});

            //3.类选择器

            $('.li3').css('background','green');

            //4.通配符选择器 * 使用不是很频繁

            console.log($('*'));

            //清空整个界面的dom元素

            $('*').html('');

        })

    </script>

</html>

选择器的种类如上所示：分为ID选择器，标签选择器，类选择器，通配符选择器；当然这些是一种基础类型的选择器。

所需要注意的是，当一个选择器想要设置多个元素的时候采用{}的形式。

$('a').css('color','yellow')单个

$('.li3').css('background','green');

$('a').css({'color':'yellow','font-size':'24px'});多个

下面是层级选择器的使用方法：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /*#brother{

                color: red;

                font-size:24px;

            }*/

        </style>

    </head>

    <body>

        <ul>

            <li id="brother">你大爷1</li>

            <li><a href="https://www.luffycity.com">你大爷2</a></li>

            <li class="li3">你大爷3</li>

            <li>你大爷4</li>

            <li>你大爷5</li>

        </ul>

        <div id="box">

            <p id="father">天王盖地虎</p>

            <p>我是你老母</p>

            <p>宝塔镇河妖</p>

            <p>蘑菇放香蕉</p>

            <div id="box2">

                <p>小鸡炖蘑菇</p>

            </div>

        </div>

    </body>

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

    <script type="text/javascript">

        //使用jquery的时候 要有入口函数 回调函数

        $(document).ready(function(){

            //1.后代选择器  div p

            $('#box p').css('color','red');

            //2.子代选择器  div > p

            $('#box>p').css('color','yellow')

            //3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +

            $('#father+p').css('font-size','30px');

            //4.兄弟选择器 ~

            $('#father~p').css('background','blueviolet');

            console.log($('li'));

            //5.获取第一个元素

            $('li:first').css('font-size','50px');

            //6.获取最后一个元素

            $('li:last').css('font-size','50px');

            $('li:eq(3)').css('font-size','50px');

        })

    </script>

</html>

子代选择器('div>p ')和后代选择器（'div p'）的最大区别就是在于子代是只选择儿子辈，后代是子子孙孙无穷尽。

而兄弟选择器('#father~p')和毗邻选择器('#father+p')最大区别在于兄弟是选择同一层级下的所有，而毗邻只是同一层级下的一个。

而

$('li:eq(3)').css('font-size','50px');

用的最多

属性选择器：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div id="box">

            <h2 class="title">属性元素器</h2>

            <!--<p class="p1">我是一个段落</p>-->

            <ul>

                <li id="li1">分手应该体面</li>

                <li class="what" id="li2">分手应该体面</li>

                <li class="what">分手应该体面</li>

                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked"></input>

                <input name="username1111" type='text' value="1"></input>

                <input name="username2222" type='text' value="1"></input>

                <input name="username3333" type='text' value="1"></input>

                <button class="btn-default">按钮1</button>

                <button class="btn-info">按钮1</button>

                <button class="btn-success">按钮1</button>

                <button class="btn-danger">按钮1</button>

            </form>

        </div>

    </body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        $(function(){

//            标签名[属性名] 查找所有含有id属性的该标签名的元素

            $('li[id]').css('color','red');

            //匹配给定的属性是what值得元素

            $('li[class=what]').css('font-size','30px');

            //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

            $('li[class!=what]').css('font-size','50px');

//            匹配给定的属性是以某些值开始的元素

            $('input[name^=username]').css('background','gray');

            //匹配给定的属性是以某些值结尾的元素

            $('input[name$=222]').css('background','greenyellow');

            //匹配给定的属性是以包含某些值的元素

            $('button[class*=btn]').css('background','red')

        })

    </script>

</html>

筛选选择器：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div id="box">

            <p class="p1">

                <span>我是第一个span标签</span>

                <span>我是第二个span标签</span>

                <span>我是第三个span标签</span>

            </p>

            <button>按钮</button>

        </div>

        <ul>

            <li class="list">2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        //获取第n个元素 数值从0开始

        $('span').eq(1).css('color','#FF0000');

        //获取第一个元素 :first :last    点语法  ：get方法 和set方法

        console.log($('span').last());

        $('span').last().css('color','greenyellow');

        console.log($('span').parent('.p1'))

        $('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'});

        //.siblings()选择所有的兄弟元素

        $('.list').siblings('li').css('color','red')

        //.find()

        //查找所有的后代元素

        $('div').find('button').css('background','yellow')

    </script>

</html>

筛选选择器的区别在于他是先选中之前的条件再去选择之后的条件：属于链式调用

自学之jQuery的更多相关文章

[Python自学] day-17 (jQuery)
一.jQuery简介参考文档链接:http://jquery.cuishifeng.cn/ jQuery是JS的一个类库,是对DOM.BOM等的封装,方便我们来查找和操作元素. jQuery分为1. ...
前端框架 EasyUI （0）重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
学习javascript怎么入门,初学者5条建议
你是否已经初步掌握了html和css,但完全不知道从何入手Java?如果是,这里总结了5条建议,帮助JavaScript初学者总结学习方法,提高学习效率. 一.多看视频少看书对初学者而言,看书的效率 ...
jQuery:自学笔记(5)——Ajax
jQuery:自学笔记(5)——Ajax 使用Ajax快捷函数说明出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML ...
jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件什么是事件所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
jQuery:自学笔记(3)——操作DOM
jQuery:自学笔记(3)——操作DOM 修改元素的属性获取元素属性设置元素属性修改元素的内容说明有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...
jQuery:自学笔记(2)——jQuery选择器
jQuery:自学笔记(2)——jQuery选择器基本选择器说明 jQuery的基本选择器与CSS的选择器相似: 实例标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...
jQuery:自学笔记(1)——基础入门
jQuery:自学笔记(1)——基础入门认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...
JQuery自学代码---（一）
/** * Created by wyl on 15-3-4. */ //Jquery是一个JavaScrioe库,它极大的简化了JavaScript编程 $(document).ready(func ...

随机推荐

注解（annotation）
目录 JAVA注解 SpringMVC注解 RestEasy注解 JSON注解 java注解 SpringMVC注解 restEasy注解 Json注解: @JsonInclude(JsonIncl ...
nodejs 解决跨域
1.失败 app.all('*', function (req, res, next) { res.header("Access-Control-Allow-Origin", &q ...
Sql Server中日期时间格式化为字符串输出
在SQL Server数据库中,SQL Server日期时间格式转换字符串可以改变SQL Server日期和时间的格式,是每个SQL数据库用户都应该掌握的.本文我们主要就介绍一下SQL Server日 ...
C语言复习：编译
C接口的封装和设计专题 Win32环境下动态链接库(DLL)编程原理比较大的应用程序都由很多模块组成,这些模块分别完成相对独立的功能,它们彼此协作来完成整个软件系统的工作.其中可能存在一些模块的 ...
用ADO操作数据库的方法步骤（ZT）
http://www.cppblog.com/changshoumeng/articles/113437.html 学习ADO时总结的一些经验用ADO操作数据库的方法步骤 ADO接口简介 ADO库包 ...
linux 3.10 一次softlock排查
x86架构.一个同事分析的crash,我在他基础上再次协助分析,也没有获得进展,只是记录一下分析过程.记录是指备忘,万一有人解决过,也好给我们点帮助. 有一次软锁,大多数cpu被锁,log中第一个认为 ...
python学习笔记之函数的参数
函数的参数有位置参数和关键字参数,位置参数一定要在关键字参数的前面,位置参数的优先级是高于关键字参数的,否则会报错 def my_abs(a,b): print(a) print(b) my_abs( ...
log4j 文件配置
//log4j配置日志文件输出到磁盘一天一个 log4j.appender.File=org.apache.log4j.DailyRollingFileAppenderlog4j.appender.F ...
jQuery中的end()方法
定义和用法 end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态. 以上是官方说法,比较难理解. 还是用一个例子来说明 <!DOCTYPE html> <h ...
ERROR: dump failed because assets could not be loaded
在命令行输入命令,想查看到app的包名,报错,如下: D:\测试\测试\android-sdk_r16-windows\android-sdk-windows\platform-tools>aa ...

自学之jQuery

自学之jQuery的更多相关文章

随机推荐

热门专题