前端基础------jquer y学习

一. jquery是什么

　　快速,简洁,轻量级的JavaScript库(JavaScript框架)使用户可以快速的操作HTML document,实现动画效果,并方便的地为网站提供AJAX交互.文档全面,详细,还可以使用各种插件.
简单的说就是封装了javascript的功能,更为方便用户使用JavaScript.

二. jquery对象

　　jquery对象就是jquery把DOM对象包装后产生的对象,jquery对象就可以使用jquer的方法了.

$('#test').html()   ------>$('')这是jquery语法, 用来封装DOM对象的, #test是选择器,.html()这是jquery里面的方法

　　　　　　　　　　　　　　这个语句的意思就是,选择id为test的DOM对象,用jquery封装成jquery对象之后,调用jquery里面的html()方法

 　　　　　　　　　　　　　 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
　　　
　　　　　　　　　　　　　　约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

　　var　variable=DOM对象

　var  $variable=jquery对象

　　关于jquery对象和DOM对象的相互转换

1. jquery对象--->DOM对象       $('c3')[0].innertml  //把jquery对象转换成DOM对象 

2. DOM对象------>jquery对象    $('#i5').html    //把id为i5的DOM对象转换成jquery对象并转调用jquery的html()方法

　　注意:不管jquery是通过什么选择器选择的,他一定是一个集合,即使他是通过id选择的,也是一个集合,只不过是这个集合只有一个元素.

　　jquery基本语法:$('selector').action()

三. 寻找元素(选择器和筛选器)

　　1. 选择器的种类(其实就是css的选择器)

1. 基本选择器
　　$('*')      $('#id')     $('.class')   $('element')    $('.class,p,div')       //通用,id,类,对象,组合

2. 层级选择器
　　$('.outer div')    $('.outer>div')    $('.outer+div')    $('.outer~div')      //后代,儿子,毗邻,弟弟

3. 属性选择器
　　$('[mmm]')    $('[mmm="baijia"]')       $('[mmm="baijia"][wocal]')         //具有某些自定义属性的,只要有i选中的那个属性就会被选择,不管他本身还有多少种其他属性

4. 基本筛选器
　　$('li:first')   $('li:last')    $('li:eq(3)')    $('li:even')   $('li:odd')    $('li:gt(3)')   $('li:lt(2)')

　　//冒号表示在选择的基础上在再进行一次过滤, first第一个, last最后一个, eq(index)找索引的那个
　　//even偶数, odd奇数,gt(index), 大于index的所有, lt(index) 小于index的所有
　　//这边所有的都是指索引

5. 表单选择器
　　$('[type="text"]')   ---------->$(':text')       注意:只适用于input标签:    $('input:cheched')

　　// $('[type=checkbox]').attr('checked','checked')
　　
　　// $(':checkbox').attr('checked','checked'

　　6. 关于表单属性选择器:

    :enabled

    :disabled

    :checked

    :selected

<body>

<form>

    <input type="checkbox" value="" checked>

    <input type="checkbox" value="" checked>

  <select>

      <option value="">Flowers</option>

      <option value="" selected="selected">Gardens</option>

      <option value="" selected="selected">Trees</option>

      <option value="" selected="selected">Trees</option>

  </select>

</form>

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

<script>

    // console.log($("input:checked").length);     // 2

    // console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1

    $("input:checked").each(function(){

        console.log($(this).val())

    })

</script>

</body>

表单你属性选择器

　　2.筛选器

1. 过滤筛选器
　　$('li').first

　　$('li').last

　　$('li').eq(3)

　　$('ul li').hasclass('test')

　　 var index=3;
　　 $(".c3:"+"eq("+index+")").css("color","red");

　　 $(".c3").eq(3).css('color','red');  //这两种效果是等价的, 但是这种不用拼接字符串, 效率高, 所以过滤筛选器比较推荐这一种

　　$('.c1').hasclass('c1')          //判断选择器是否含有某个类名

　　console.log($('.c1').hasclass('c1'))  //返回值为true或者false

2. 查找选择器

　查找子标签

　　$('.p1').children().css('color','red');        //查找所有子标签
　　$('.p1').children().first().css('color','red');  //查找子标签中的第一个,下同
　　$('.p1').children(':first').css('color','red');

　　$('.c9').children('p').css('color','red');    //查找子标签中的p标签

　　$('.c9').find('p').css('color','red');        //查找后代中的p标签

　查找兄弟标签 
　　//向下查找兄弟标签

　　$('#i2').next().css('color','red');       //查找选中标签的下一个
　　$('#i2').nextAll().css('color','red');    // 查找选中标签
　　$('#i2').nextUntil(3).css('color','red');  //从当前标签知道索引,是一个开区间(选中对象,until(index))  两者都不包含
　　
   //向下查找兄弟标签

　　$('#i2').prev().css('color','red');
　　$('#i2').prevAll().css('color','red');
　　$('#i2').prevUntil(3).css('color','red');

　查找父标签

    // $('.c10').parent();         //查找父亲
    //$('.c10').parents();   //[p1,p2,p3....html]  //查找所有直系祖宗
    // $('c10').parentsUntil()      //往上一级级查找祖宗

　注意:子标签会继承父标签的样式

　　　注:内置方法都是区分大小写的,要注意

四. 事件的绑定

　　页面载入

ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){}) -----------> $(function(){})

　　事件绑定

//语法: 选中的标签对象.事件.(function(){})

eg: $("p").click(function(){})

　　事件的委派

$("").on(even,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
　　　　　　　　　　　　　　　　　　　　　　//$("")选中的元素,on绑定,even事件,select委派的对象,data参数,可不填,fn)时间所要执行的函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script>

        //这个相当于整个网页加载完成

        $(function () {

                       // 语法:$().事件(function(){})

                  //  $('ul li').click(function(){

                // alert(this.innerHTML);            //this当前触发的标签,即一个DOM对象,

                 //相当于                         // 所有要用jquery的方法要转化成jquery对象

                 // alert($(this).html());

            // })

            //给ul丙丁事件click,然后把这个事件委派给li,当触发这个事件要执行的函数

            $('ul').on('click','li',function () {

                alert($(this).html());

            });

            //选中add这个标签,选择触发事件,点击h后要执行的函数

            $('.add').click(function (){

                $('.box').append('<li>789</li>')

            })

        })

    </script>

</head>

<body>

<ul class="box">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li class="c1"></li>

</ul>

<button class="add">add</button>

</body>

</html>

例子

五. jquery对象的操作

1.  文本操作
　　$('').html()    //取值
　　$('').text()    //取值
　　$('').html('参数')     //赋值
　　$('').text('参数')     //赋值  赋值的时候和js一样的,当赋值的是标签的时候,两种赋值的参数的展现形式是不一样的 

2.  属性操作
　　$('').attr('参数')             //参看参数的值
　　$('').attr('参数',''值)        //设置属性
　　$('p').attr('alex','dsb');    //设置属性
　　$('p').attr('alex');　　　　　　　　//查看属性操作  只有设置了属性才能查看属性
　　$('p').removeAttr('alex');         //删除属性

3.  class操作
　　$('test').addClass('xxx')       //给class增加一个值xxx
　　$('test').removeClass('xxx')    //把值为xxx的参数从class列表中删除

六. each循环

　　在jquery中

$('p').css('color','red');         //这个语句的作用是把所有的p标签都进行相同的css样式.这是通过jquery的内部循环方式实现的.

　　如果对于不同标签进行不同的处理呢!那就需要用到each循环了

1. 先回顾一下js循环

//回顾js的循环
let arr=['美女','帅哥','靓仔','站街的'];
let obj={'老王':'隔壁的','小王':'老王的'};
for (var i=0;i<arr.length;i++){

}

2.jquery的循环方式

//each循环方式一  $代表的是jquery这个类.类就可以使用自己的方法
$.each(arr,function (i,j) {
    console.log(i,j)
});
//结果:循环拿出数组的结果.带有索引
//0 "美女"
//1 "帅哥"
//2 "靓仔"
//3 "站街的"

$.each(obj,function(i,j){
    console.log(i,j);
});

//结果:
//老王 隔壁的
//小王 老王的

3.

//each循环方式二
$('p').each(function(){
    if ($(this).html()=='tom'){
        // return false              //相当于break
        return                  //相当continue,return的值为undefined,会继续循环
    };

    console.log($(this).html());   //this当前循环的DOM对象
    //console.log(this.innerHTML);  //这两个是同价的,只不过对象不同,调用的方法不同
     //$(this).html($(this).html()+'!')     //给p标签的文本加一个感叹号(先拿到文本,加完感叹号再赋值给他自己)

})

　　注意:以上实现方法都是通过jquery实现的,自己要去引入jquery

语法总结:
1.  $.each(obj,function{})   //obj是一个可迭代对象

2.$('p').each(function{})

七 . 文档节点的处理

//创建一个标签对象

    $("<p>")

//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");

    $("").appendTo(content)       ----->$("p").appendTo("div");

    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");

    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");

    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换

    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()

    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

　　　
　　　　看一个例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

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

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">

<body>

<h3>员工表格</h3>

<div class="container">

    <button class="btn btn-info add_btn">添加</button>

    <table class="table table-hover table-striped table-bordered" >

    <thead>

        <tr>

            <th>ID</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>部门</th>

            <th>薪水</th>

            <th>操作</th>

        </tr>

    </thead>

     <tbody class="tbody">

     <tr>

         <td></td>

         <td>张三</td>

         <td></td>

         <td>销售</td>

         <td></td>

         <td>

             <button class="del btn btn-danger">删除</button>

             <button class=" edit btn btn-warning">编辑</button>

         </td>

     </tr>

     <tr>

         <td></td>

         <td>李四</td>

         <td></td>

         <td>技术</td>

         <td></td>

         <td>

             <button class="del btn btn-danger">删除</button>

             <button class=" edit btn btn-warning">编辑</button>

         </td>

     </tr>

     <tr>

         <td></td>

         <td>王五</td>

         <td></td>

         <td>售后</td>

         <td></td>

         <td>

             <button class="del btn btn-danger">删除</button>

             <button class=" edit btn btn-warning">编辑</button>

         </td>

     </tr>

     </tbody>

    </table>

    <div class="hide add">

        <hr>

        <form id='form' action="">

            <div>

                姓名

                <input type="text">

            </div>

            <div>

                年龄

                <input type="text">

            </div>

            <div>

                部门

                <input type="text">

            </div>

            <div>

                薪水

                <input type="text">

            </div>

                提交

            <input type="button" value="submit" class="submit_btn">

        </form>

    </div>

</div>

<script>

    //添加

    //对添加按钮进行绑定事件

    $('.add_btn').click(function(){

        $('.add').removeClass('hide');

    });

    //创建jquery对象

    //当提交的时候,把是最后一个标签的编号拿到并加1给要创建的哪一个

    $('.submit_btn').click(function () {

        //创建jquery对象

        let $tr=$('<tr>');

        let ID=$('.tbody tr:last td:first').html();

        ID=parseInt(ID)+;

        let $td1=$('<td>'+ID+'</td>>');

        $tr.append($td1);

        //把form表单的内容遍历一遍,一一放进td内,再添加到tr内

        //这边要注意,form和text有一个空格

        $('#form :text').each(function () {

            let val=$(this).val();

            let $td_temp=$('<td>'+val+'</td>');

            $tr.append($td_temp);

            $td_temp.val('')

        });

        //构建操作标签

        $tr.append('<td><button class="del btn btn-danger">删除</button>\n' +

            '<button class=" edit btn btn-warning">编辑</button></td>');

        $('tbody').append($tr); //append参数可以是jquery对象,也可以是标签字符串

        // $('tbody').prepend($tr);  //添加在第一行

        // $tr.appendTo('.tbody');   //把要添加的添加到某个节点,被动的

        $('.add').addClass('hide');

    });

    //删除事件

    //法一

    // $('.del').click(function(){

    //     $(this).parent().parent().remove();

    // });

    //法二

    $('.tbody').on('click','button.del',function(){

        $(this).parent().parent().remove();

    });

</script>

</body>

</html>

　　注意:jquery和bootsript自己要导入!

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="outer">

    <div class="item">

        <button class="add">+</button><input type="text">

    </div>

</div>

<script>

    $(".add").click(function () {

        let $clone=$(this).parent().clone();

        $clone.children("button").html("-").attr("class","rem");

        $(".outer").append($clone);

    });

    $(".outer").on("click",".rem",function () {

        $(this).parent().remove();

    })

</script>

</body>

</html>

节点拷贝实例

八. css相关操作

　　尺寸操作

        $("").height([val|fn])

        $("").width([val|fn])

        $("").innerHeight()

        $("").innerWidth()

        $("").outerHeight([soptions])

        $("").outerWidth([options])

　　　　demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script>

    $(document).ready(function(){

             console.log($(".c1").height());   //就是.c1的高度

             console.log($(".c1").width());　　　//就是.c1的宽度
　　　　　　　 console.log($('c1').innerHeight()  //c1+padding
　　　　　　　 console.log($('c1').outerHeight()  //c1+padding+border
　　　　　　　console.log($('c1').outerHeight(true)  //c1+padding+border+margin

　　 }); </script> <style> .c1{ width: 200px; height: 200px; background-color: skyblue; padding: 50px; border:30px solid red; margin: 20px; } </style> </head> <body> <div class="c1"></div> </body> </html>

九. jQuery扩展

　1.　扩展jQuery对象本身。

　　用来在jQuery命名空间上增加新函数。

　　在jQuery命名空间上增加两个函数:

<script>

    jQuery.extend({

      min: function(a, b) { return a < b ? a : b; },

      max: function(a, b) { return a > b ? a : b; }

});

    jQuery.min(,); // => 2

    jQuery.max(,); // => 5

</script>

　　2.扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

　　增加两个插件方法：

<body>

<input type="checkbox">

<input type="checkbox">

<input type="checkbox">

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

<script>

    jQuery.fn.extend({

      check: function() {

         $(this).attr("checked",true);

      },

      uncheck: function() {

         $(this).attr("checked",false);

      }

    });

    $(":checkbox:gt(0)").check()

</script>

</body>

前端基础------jquer y学习的更多相关文章

前端基础之html学习一：
网站的建站流程页面图例网页的结构 WEB标准 WEB标准是网页制作的标准,它不是一个标准,它是根据网页的不同组成部分生成的一系列标准.这些标准大部分由W3C起草发布,也有部分标准由ECMA起草发布 ...
web前端基础知识学习网站推介
内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...
web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
前端基础之JavaScript day51
前端基础之JavaScript JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中) ...
BAT 前端开发面经 —— 吐血总结前端相关片段整理——持续更新前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结目录 1. Tencent 2. 阿里 3. 百度更好阅读,请移步这里聊之前最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
前端第三篇---前端基础之JavaScript
前端第三篇---前端基础之JavaScript 一.JavaScript概述二.JavaScript的基础三.词法分析四.JavaScript的内置对象和方法五.BOM对象六.DOM对象七 ...
day34 前端基础之JavaScript
day34 前端基础之JavaScript ECMAScript 6 尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分.实际上 ...
web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频链接: http://pan.ba ...

随机推荐

在Linux下adb连接不上android手机的终极解决方案
转自: http://blog.csdn.net/liuqz2009/article/details/7942569 1.做android开发的过程,碰到了Linux下adb识别不了android设备 ...
sys模块进度条百分比
用于提供对Python解释器相关的操作: sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) ...
IDEA创建的Maven项目中解决编写pom.xml没有提示
问题如下没有提示信息解决方案把Repositories中的配置更新成本地仓库问题解决
PHP中几种加密形式
1.Md5加密和Crypt都是单向加密: 登陆时把登录密码转为md5值,然后和数据库中的进行比较. 其中crypt中的盐值支持多种: 以CRYPT_STD_DES是以/0-9A-Za-z/中的两个字符 ...
day17 9.关闭资源与异常处理
Java程序跟任何外部设备进行连接之后,都要把连接断开,把资源释放掉.Connection是一个重量级资源,Connecton占内存,Connection的获取是比较消耗资源和内存的.finally是 ...
？？？Spring集成MyBatis02 【不推荐使用，了解即可】
2017年5月19日09:31:22 由于该种方法比较麻烦,所以三少暂时不更新,哈哈哈:待更新...
win10获取超级管理员权限脚本实现
建立一个TXT文件,把下面的脚本贴到里面,然后把后缀改成reg格式,双击添加到注册表就可以了, win10_1703版本亲测可用.... Windows Registry Editor Version ...
Win10 VS2013 PCL1.8.1和依赖项VTK8.0.1, QHuall(2.15.2), FLANN1.9.1,Boost1.59.0,Zbil1.2.11和libPNG1.6.34编译安装
编译和安装过程最好使用管理员权限去操作,避免不必要的错误. 一般而言为了区分Debug和Release库,添加输入变量 Name: CMAKE_DEBUG_POSTFIX Type: STRING V ...
USB无线网卡导致耳机电流声很大
今天把许久未用的USB无线网卡插入到电脑中,戴上耳机准备听音乐,发现耳机里面的电流声非常大.回想以前并没有这种状况呀,忽然发现原来是USB无线网卡和耳机都插在前置面板中了,把USB无线网卡插在后置面板 ...
JDBC方式从数据库中查询数据并显示
1.创建数据库表myuser DROP TABLE IF EXISTS `myuser`; CREATE TABLE `myuser` ( `) NOT NULL COMMENT '姓名', `id` ...

前端基础------jquer y学习

前端基础------jquer y学习的更多相关文章

随机推荐

热门专题