Jquery学习

最新推荐文章于 2024-05-05 23:51:11 发布

humorous man

最新推荐文章于 2024-05-05 23:51:11 发布

阅读量71

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/humorious/article/details/109226216

版权

jQuery

一个快捷的，轻便的JavaScript框架。

jquery支持css选择器。

jquery可以使用下载的js文件，也可以使用CDN。

https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

例如：

设计思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
    <div class="div1">

    </div>
</body>
<script>
    $(function(){
        $(".div1").css("background-color","red");
    })
</script>
</html>

//获取奇数的li标签
$("li:even").css("background-color","red");
//获取偶数的li标签
 $("li:odd").css("background-color","red");
//获取第二个li标签
 $("li:eq(2)").css("background-color","red");
//以下的两种方法都可以改变li标签中class为box的css样式
 $("li.box)").css("background-color","red");
 $("li").filter('.box').css("background-color","red");

jquery的链式操作

$(function(){
       $('h1').click(function(){
           alter("单机");
       }).css("background-clock",'red').mouseenter(
           function(){
               this.style.backgroudColor='bule';
           }
       ).mouseout(function(){
           this.style.backgroudColor='green';
       })
    })

取值赋值合体

$(function(){
    //jquery的取值操作
      alert($('#div').html())
	//jquery的赋值操作
      $('#div').html("<h2>我是新赋值的内容</h2>")
    })

Jquery的方法

filter not has 方法

//filter  过滤 对已经获取的的网页元素进行过滤
//not filter的反义词
//has  拥有，直接判定子节点中是否含有满足条件的元素

$(function(){
        //获取div中含有class为box的对象
        $("div").filter('.box').css("background-color",'red');
        //获取div中不含class为box的对象
        //判断子节点中是否含有class为box的元素
        $("div").has('.box').css("background-color",'red');
    })

prev，next方法

//prev 当前兄弟节点中的上一个节点
//next 当前兄弟节点中的下一个节点
//find 查找子节点
<body>
    <h2></h2>
    <p></p>
    <span></span>
    <h3></h3>
    <em></em>
</body>
<script>
    $(function(){
    	//查找h3标签的前一个兄弟节点
        $("h3").prev().css("background-color",'red');
		//查找h3标签的后一个兄弟节点
        $("h3").next().css('background-color','blue');
    	//查找ul中的li标签
    	$('ul').find('li').css('background-color','orange');
    })
</script>

index和eq方法

//index()获取在兄弟节点的下标
//eq(下标) 通过下标获取指定的元素节点
 $(function(){
        alert($('h3').index());
        $('li').eq(3).css('background-color','pink');
        $('li:eq(2)').css('background-color','pink');
    })

attr

//设置和修改行间属性

$(function(){
        //获取属性
        console.log($('#idv').attr('title'));
        console.log($('#idv').attr('class'));
        console.log($('#idv').attr('id'));
        //修改属性
        $("#div").attr('class','box2');
        $('#div').attr('title','world');
    })

addClass,removeClass

$(function(){
        //给class为div1的div添加class，即使重复也不报错
       $('#div1').addClass("box2 box3 box4");
       //从class为div1的class中去掉box2这个class，不存在也不报错
       $('#div1').removeClass('box2');
    })

width innerWidth outerWidth

width() 直接是width
innerWidth() width+padding
outerWidth() width+padding+border
outerWidth(true) width+border+padding+margin
height()
innerHeight()
outerHeight()

节点操作

inertBefore() before()
insertAfter() after()
appendTo() append()
prependTo() prepend()

remove()

 $(function(){
        //找到span标签将其插入到div的前面
      $('span').insertBefore($('div'));
	  $('div').brefore('span')
      //找到div节点，将其插入到span的后面
      $("div").insertAfter($('span'));

     //找到span节点，插入到div节点的子节点末尾
      $('span').appendTo($('div'));
     //找到span节点，将其插入到div节点的首位 
      $('span').prependTo($('div'));
    //删除div节点 
      $("div").remove();
    })

事件绑定

on off

on的用法

$(function(){
        //给一个事件添加一个函数
      $("#div").on('click',function(){
          alert('hello');
      })
      //同时给多个事件添加同一个函数，使用空格分开
      $('div').on("click mouseover",function(){
        //   方法体
      })
      $('div').on({
          click:function(){
            alert("点击");
          },
          mouseover:function(){
            alert("mouseover");
          }
      })
    })

事件委托

 $(function(){
        //第二个参数是触发对象的选择器
      $('ul').on("click",'li',function(){
          $(this).css('background-color','red');
      })
    })

off的用法

 $(function(){
    //取消div1上的所有事件上的所有函数
     $('#div1').off();
    //取消某一事件下的所有函数  
     $('#div1').off('click');
    //取消某一事件下的指定的函数
     $('#div1').off('click',show);
    })

ev.stopPropagation();阻止事件冒泡

ev.preventDefault();阻止默认行为

humorous man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery学习

jQuery一个快捷的，轻便的JavaScript框架。jquery支持css选择器。jquery可以使用下载的js文件，也可以使用CDN。https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js例如：设计思想<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport
复制链接

扫一扫