一. 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学习的更多相关文章
	

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

	


随机推荐
	

    
									
  1. 框架之 hibernate之各种查询
			
    1. Hibernate的查询方式 2. Hibernate的查询策略 案例:使用Hibernate完成查询所有联系人功能 需求分析 1. 完成所有的联系人的查询 技术分析之Hibernate框架的查 ...
    
			
    2. 
						
  2. 托盘在XP下不能显示tooltip，在Vista和Windows7下正常
			
    转自:http://blog.csdn.net/debehe/article/details/4294053 奇怪的问题,想了很多可能的理由,最终的答案竟然是一开始就被我否认了的一种可能!! 问题现象 ...
    
			
    3. 
						
  3. C++面向对象类的实例题目七
			
    题目描述: 编写两个有意义的类,使一个类嵌套在另一个类中. 分析: 本题涉及两个类student和cdegree,前者为学生类,包含学生的学号(nubner),姓名(name)和成绩(degree), ...
    
			
    4. 
						
  4. PCL—点云分割（超体聚类） 低层次点云处理
			
    博客转载自:http://www.cnblogs.com/ironstark/p/5013968.html 1.超体聚类——一种来自图像的分割方法 超体(supervoxel)是一种集合,集合的元素是 ...
    
			
    5. 
						
  5. GOOGLE机器学习速成班
			
    地址:https://developers.google.cn/machine-learning/crash-course/ 不用***就可以学习.
    
			
    6. 
						
  6. p2421 荒岛野人
			
    传送门 题目 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,…,M.岛上住着N个野人,一开始依次住在山洞C1,C2,…,CN中,以后每年,第i个野人会沿顺时针向前走 ...
    
			
    7. 
						
  7. kaggle Pipelines
			
    # Most scikit-learn objects are either transformers or models. # Transformers are for pre-processing ...
    
			
    8. 
						
  8. 关于Lucene，你至少要知道的事
			
    1.是什么? 全文搜索引擎 2.干什么? 实现网站全文检索功能(自带语法高亮功能) 3.原理? Lucene生成索引(语法解析后,生成索引文件)-根据索引进行查询(语法解析后,根据解析后的结果进行查询 ...
    
			
    9. 
						
  9. c#继承、多重继承
			
    c#类 1.c#类的继承 在现有类(基类.父类)上建立新类(派生类.子类)的处理过程称为继承.派生类能自动获得基类的除了构造函数和析构函数以外的所有成员,可以在派生类中添加新的属性和方法扩展其功能.继 ...
    
			
    10. 
						
  10. c#  生成xml，xsi不能生成问题
			
    C#  生成xml,xsi不能生成问题 一.简单了解xsi及其其他属性: xsi:schemaLocation用于声明了目标名称空间的模式文档,属性的值由一个URI引用对组成,两个URI之间以空白符分 ...
    
			
    11.