一.概念：
    1.jquery 的选择器和ccs 相同

    2.jquery对象， dom对象的集合，类似python中list，有自己的各种方法和属性  //  [dom1,dom2,.....]

    3.方便之处，可以省略原生js中for 循环的操作

    4.jquery 对象和dom对象的关系：
        jquery对象转化成dom 对象：$()[]---------->dom对象       例子：$("li")[0] 切片
        dom对象转化成jquery对象：$(dom)---------->jquery对象

    5.入口函数 ，当js代码放在head头部时，需要写入口函数
        导入jquery.js 文件
        <script src="jquery-3.3.1.js"></script>
        <script>
            入口函数，相当于window.onload=function(){写js代码}
            $(function(){写js代码})
        </script>
　　6.事件委派  封装在 on 方法中
　　　　一般是  父节点或祖父节点等，委派某个事件给下面的子节点,实现父节点下，子节点同步性能的作用。

　　　　　格式：   $(父节点或祖父节点等).on(事件，字节点或子孙节点，function（）{}）

　　　　　例子1：$("ul").on("click","li",function(){alert($(this).html()});  
　　　　　例子2：$("table").on（”click”，“#td1”,function(){$(this).parent().parent().remove()}） //此事例是表单中的操作
　　　　　
二.jquery 选择器 和 筛选器

    1.基本选择器
        $("*")
        $("#id")
        $(".class")
        $("element")
        $(".class,p,div")

    2.层级选择器
        $(".outer div") 后代选择器  子子孙孙
        $(".outer>div") 子代 ，只包含儿子
        $(".outer+div") 毗邻，下面的第一个
        $(".outer~div") 该dom对象下面的兄弟

    3.基本筛选器　　：冒号有筛选的含义，选出
        $("li:first")   或$("li").first()  用后面这种比较好些，不用字符串的拼接
        $("li:eq(2)")   或$("li").eq(2)
        $("li:even")
        $("li:gt(1)")

    4.属性选择器
        $("'[自定义属性名]'")
        $('[id="div1"]')
        $('["alex="sb"][id]')

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

    5.表单属性选择器
        :enabled
        :disabled
        :checked
        :selected
        例子：$("input:checked")

    6.过滤筛选器

        $("li").eq(2)
        $("li").first()
        $("ul li").hasclass("test")

    7.查找筛选器　　

         1. 查找子标签：
            $("div").children(".test")
            $("div").find(".test")

         2.向下查找兄弟标签：
            $(".test").next()
            $(".test").nextAll()
            $(".test").nextUntil()

         3.向上查找兄弟标签：
            $("div").prev()
            $("div").prevAll()    //括号里面还可以写条件 $("div").prev(":lt(4)")  //该节点前所有兄弟中索引小于4的兄弟标签
            $("div").prevUntil("标签名")   //不包含，括号里面的标签

         4.查找所有兄弟标签：
             $("div").siblings()  //不包含自己

         5.查找父标签：
             $(".test").parent()

             $(".test").parents() //一层一层往上找父亲

             $(".test").parentUntil()


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script>

        //选择器

        //入口函数

        $(function () {

            //基础选择器

            // $(".c1").css("color","red");

            // $(".c3").css("color","red");

            // $(".c3:first").css("color","red");

            // $(".c3").first().css("color","red");

            // $(".c3:last").css("color","red");

            // $(".c3").last().css('color',"red");

            // $(".c3:even").css("color","red");//偶数

            // $(".c3:odd").css("color","red");//奇数

            // $(".c3:gt(2)").css("color","red");//索引大于2的

            // $(".c3:lt(2)").css("color","red");//索引小于2的

            // $("[alex]").css("color","red");//自定义属性选择器

            // $("[alex='123']").css("color","red");

            // $("[alex='123'][peiqi]").css("color","red");

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

            // $(":checkbox").attr("checked","checked");

            //进阶筛选器

            // $(".c5 :checked");  //筛选.c5下被选中的标签的集合

            // $(".c3:first").css("color","red");

            // $(".c3").first().css("color","red");

            // var index =2;

            // $(".c3:"+"eq("+index+")").css("color","red"); //需要字符串的拼接，麻烦

            // $(".c3").eq(index).css("color","red"); //不需要字符串的拼接

            //判断某个标签是否拥有那个属性

            // console.log($("#i1").hasClass("c1"));//true

            // console.log($("[yuan]").hasClass("c7")); //true,一个对象拥有就行

            //导航选择器

                //查找兄弟标签

            // 向下查找兄弟标签

            // $("#i2").next().css("color","red");//下一个

            // $("#i2").nextAll().css("color","red");//向下找所有的兄弟

            // $("#i2").nextUntil(".c8").css("color","red");//不包括until中的那个

            //向上查找兄弟标签

            // $("#i2").prev().css("color","red");//上一个兄弟

            // $("#i2").prevAll().css("color","red");//向上找所有的兄弟

            // $("#i2").prevUntil("#i3").css("color","red");//向上找兄弟直到#i3，不包括#i3

            //找到所有的兄弟标签，不包括自己

            // $("#i2").siblings().css("color","red");

            //查找子孙标签

            // $(".p1").children().css("color","red");

            // $(".p1").children("p").css("color","red");

            // $(".p1").find("p").css("color","red");//find 和children的区别，find必须加条件

            // $(".p1").children(":first").css("color","red");//第一个儿子

            // $(".p1").children().first().css("color","red");

            //查找父标签

            // $('.c10').parent().css("color","red");//找到父标签

            // $(".c10").parents() //找到一层一层往上找父标签

            // $(".c10").parents.Until("body")/一层一层往上找父标签到body结束，且不包括body

        })

    </script>

</head>

<body>

   <div class="c1" id="i1">DIV</div>

<div class="c2">

    <p class="c4">111</p>

    <a href="">click</a>

</div>

<div class="p1">

     <p class="c3" id="i3">222</p>

     <p class="c3">333</p>

     <p class="c3" id="i2">444</p>

     <p class="c3">555</p>

     <p class="c3 c8">666</p>

     <p class="c3">777</p>

</div>

<div alex="123" peiqi="678">alex和配齐</div>

<div alex="123">alex</div>

<div alex="234">egon</div>

<div peiqi="678">8888</div>

<div class="c5">

    <input type="checkbox">

    <input type="checkbox">

    <input type="checkbox">

</div>

<div class="c6" yuan="123">123</div>

<div class="c7" yuan="234">234</div>

<div class="c9">

    <p>111</p>

    <p>222</p>

    <div class="c10">

        <p>333</p>

    </div>

    <a href="">click</a>

</div>

</body>

</html>

jquery选择器和赛选器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<ul class="box">

    <li>123</li>

    <li>234</li>

    <li>456</li>

    <li>567</li>

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

</ul>

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

<button class="rem">remove</button>

<script>

    //jquery 事件绑定格式：    $(选择器).事件（function（）{}）

    // $("ul").click(function () {

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

    // });

    // 事件委派

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

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

    });

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

        // $(".box").appendChild('<li>789</li>');不能这样写

        $(".box").append("<li>789</li>");

    });

     //如何删除最一个孩子标签

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

        // $(".box").children(":last").css("color","red");

        // $(".box").remove($(".box").children(":last"));//这个不行,语法不是这样的

        $(".box").children(":last").remove();

        //如何删除

    })

</script>

</body>

</html>

节点的删除和添加以及事件委派







<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

          .left{

              width: 15%;

              height: 600px;

              float: left;

              background-color: wheat;

          }

          .right{

              float: left;

              width: 85%;

              height: 600px;

              background-color: lightgray;

          }

           .title{

               text-align: center;

               line-height: 30px;

               background-color: #0e90d2;

               color: white;

           }

        .item{

            padding: 10px;

        }

        .hide{

            display: none;

        }

    </style>

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

</head>

<body>

<div class="outer">

      <div class="left">

           <div class="item">

               <div class="title">菜单一</div>

               <ul class="con hide">

                   <li>111</li>

                   <li>111</li>

                   <li>111</li>

               </ul>

           </div>

          <div class="item">

               <div class="title">菜单二</div>

               <ul class="con hide">

                   <li>222</li>

                   <li>222</li>

                   <li>222</li>

               </ul>

           </div>

          <div class="item">

               <div class="title">菜单三</div>

               <ul class="con hide">

                   <li>333</li>

                   <li>333</li>

                   <li>333</li>

               </ul>

           </div>

      </div>

      <div class="right"></div>

</div>

<script>

    //jquery 版的菜单栏实现

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

        // $(this).next().removeClass("hide");//操作完之后的对象还是$(this).next()

        // $(this).parent().siblings().children(".con").addClass("hide");

        $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

    })

</script>

</body>

</html>




基于jquery实现菜单栏





四.jquery 操作

        1 文本操作
              $("").html()   //获取值
              $("").text()
              $("").html("参数")  //设置内容
              $("").text("参数")

        2 属性操作
              $().attr("")  //获取属性值
              $().attr("","")  // 添加属性和值
              $("p").attr("alex")
              $("p").attr("alex","dsb")  //添加属性和值
              $("p").removeAttr("class") // 删除属性

        3 class  操作

              $("p").addClass("c1")  // 添加样式
              $("p").removeClass("c1")  //// 删除样式

　　　　　4.节点的删除和添加
　　　　　　　　删除某节点：
　　　　　　　　jquery节点对象.remove()
　　　　　　　　添加某节点：


　　　　　　　　　例子：$(".box").append("<li>789</li>");




												


											
50  Jquery 库的更多相关文章
	

    
								
  1. jquery库和cityselect插 件的省市 级联
		
    /*$(function(){ $("#select_provice").citySelect({ prov:"北京", nodata:"none&q ...
    
		
    2. 
						
  2. 锋利的jQuery-1--解决jquery库和其他库的冲突
		
    在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这 个$而产生的冲突的发生.比如说:$('#xmlas')和JQue ...
    
		
    3. 
						
  3. jQuery基础学习3——jQuery库冲突
		
    默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...
    
		
    4. 
						
  4. Jquery库及其他库之间的$命名冲突解决办法
		
    首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生.比如说:$('#xmla ...
    
		
    5. 
						
  5. 如何避免jQuery库和其他库的冲突
		
    默认情形:jQuery用$作为自身的快捷方式 1. jQuery库在其他库之后导入 (1)方法:使用jQuery.noConflict()函数将变量$的控制权转移给其他库 (2)操作: (a)在js代 ...
    
		
    6. 
						
  6. 如何解决jquery库的冲突问题
		
    多个库之间的冲突 当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免. 那么,既然有冲突的问题,为什 ...
    
		
    7. 
						
  7. jQuery库冲突解决办法
		
    一次面试中面试官问到jQuery解决怎么冲突?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名 ...
    
		
    8. 
						
  8. 跨域 jQuery库ajax请求
		
    XMLHttpRequest是原生ajax,缺点是使用起来比较繁琐. jQuery库提供了一组简洁的ajax请求方法. ajax() get() post() 具体使用参考官方API: http:// ...
    
		
    9. 
						
  9. day050 前端Jquery库的使用
		
    一.导入jquery文件 <script src=" jquery库文件"></script> 二.选择标签 >>概念明晰: $是jQuery类 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python3.4学习笔记(一) 基本语法 python3不向下兼容，有些语法跟python2.x不一样
			
    python3.4学习笔记(一) 基本语法 python3不向下兼容,有些语法跟python2.x不一样,IDLE shell编辑器,快捷键:ALT+p,上一个历史输入内容,ALT+n 下一个历史输入 ...
    
			
    2. 
						
  2. MySQL数据库----多表查询
			
    一.介绍 首先先准备表 员工表和部门表 #建表 create table department( id int, name varchar(20) ); create table employee1( ...
    
			
    3. 
						
  3. java异常复习
			
    如果有时学东西概念太多了,可以反着学,从结果到过程,从代码到概念,也许就不会那么枯燥了,比如学反射的时候. java异常复习 异常和错误的区别? 异常:程序或环境本身出现错误.(程序员可以捕获并处理) ...
    
			
    4. 
						
  4. 《课程设计》——cupp的使用
			
    <课程设计>--cupp的使用 cupp简介 cupp是强大的字典生成脚本.它是一款用Python语言写成的可交互性的字典生成脚本.尤其适合社会工程学,当你收集到目标的具体信息后,你就可以 ...
    
			
    5. 
						
  5. TF-调整矩阵维度 tf.reshape 介绍
			
    函数原型为 def reshape(tensor, shape, name=None) 第1个参数为被调整维度的张量. 第2个参数为要调整为的形状. 返回一个shape形状的新tensor 注意sha ...
    
			
    6. 
						
  6. FATFS（A）
			
    (一),什么是文件管理系统 答:数据在PC上是以文件的形式储存在磁盘中的,这些数据的形式一般为ASCII码或二进制形式.简单点说就是:管理磁盘上的文件的方法的代码! 如:我们写到SD卡上面的数据管理一 ...
    
			
    7. 
						
  7. ubuntu下进程kidle_inject致使编译软件很慢
			
    一.背景 某一天编译一个程序发现半天都没编译ok,于是使用top一看发现有个别进程占用cpu奇高,遂出此文 二.怎么解决? 2.1 什么进程占据很高cpu 名为kidle_inject,同时开启了好几 ...
    
			
    8. 
						
  8. 51nod 1003 阶乘后面0的数量
			
    每一个 2 与一个 5 相乘,结果就增加一个零. 所以求 n! 后面的连续零的个数,其实就是求其中相乘的数含有因子每对因子 2 与 5  的个数. 又因为从1到某个数,所含 2 的个数比 5 多,所以 ...
    
			
    9. 
						
  9. dubbo 实战总结
			
    1,出现重复调用.因为有重试机制,可以改为异步调用或者幂等操作.
    
			
    10. 
						
  10. v-bind绑定属性样式
			
    一.class的四种绑定方式 1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{'class-a':isA ...
    
			
    11.