自学之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 ...

随机推荐

zabbix简易安装指南
1.php版本为5.5.37 mysql版本为5.5 nginx使用的是tengine2.2.1 2.系统为centos 7.2 最小化安装 3.使用阿里云的epel扩展源 4.首先安装依赖 yum ...
mysql 设置多个字段聚合自增
DROP TEMPORARY TABLE IF EXISTS ttp_firstInvest; CREATE TEMPORARY TABLE ttp_firstInvest ( userid varc ...
【365】拉格朗日乘子法与KKT条件说明
参考:知乎回答 - 通过山头形象描述参考:马同学 - 如何理解拉格朗日乘子法? 参考: 马同学 - 如何理解拉格朗日乘子法和KKT条件? 参考:拉格朗日乘数 - Wikipedia 自己总结的规律 ...
Python文件和目录模块介绍：glob、shutil、ConfigParser
glob模块查找符合特定规则的文件路径名,路径名可以使用绝对路径也可以使用相对路径.查找文件会使用到三个通配符,星号*,问号?和中括号[],其中"*"表示匹配0~n个字符, &q ...
OPENWRT路由3G拔号实验
以下摘自:http://www.right.com.cn/forum/thread-155168-1-1.html 首先下载 Barrier Breaker 14.07 固件配置好网络,可以访问到i ...
sqlalchemy学习-- 重要参数
Base = declarative_base 基类: 1.存储表 2.建立class-Table 的映射关系 engine = create_engine('mysql://root:root@lo ...
C# windows服务：通过cmd命令安装、卸载、启动和停止Windows Service（InstallUtil.exe）
步骤: 1.运行--〉cmd:打开cmd命令框 2.在命令行里定位到InstallUtil.exe所在的位置 InstallUtil.exe 默认的安装位置是在C:/Windows/Microsoft ...
学JS的心路历程-for of和for in
我们在刚入门JS时候,说到要跑出数组的每个值肯定都是这样子: var arr = [1,2,3,4,5,6]: for(let i = 0:i < arr.length:i++){ consol ...
typora中文版官方免费快速下载以及Markdown的一些常用语法、Java知识点
typora下载链接:https://某度云盘的域名/s/1geD1APxnyV3gogYW3E08bQ 密码:8fdp 把某度云盘的域名进行替换 1.标题 # 标题1 ## 标题2 ### 标题3 ...
根据获取的窗口句柄遍历窗口Edit控件
网上说遍历窗口控件有两种方法: 1),使用EnumChildWindows,没有深究, 学习网址如下:http://blog.sina.com.cn/s/blog_60ac1c4b010116 ...

自学之jQuery

自学之jQuery的更多相关文章

随机推荐

热门专题