jquery是一个轻量级的js库,他将js的功能进行了封装(所有的都是函数),他在封装的基础上做了进一步的兼容(兼容性好);
链式调用 (里面所有的方法返回的都是一个jquery对象)
丰富的选择器和筛选器
良好的动画兼容(动画库很强大,借助了animated.js (主要是css3的动画))
jQuery 官网: https://jquery.com/
中文官网:https://www.jquery123.com/
- <li>1li>
- <li>2li>
- <li>3li>
- <li>4li>
- <li>5li>
-
- <script src="./js/jquery.js">script> //记住这里一定要引入jquery官网的js包才能使用
-
- //css选择器
- console.log($('ul>li:nth-child(3)'));
- //新增的选择器
- console.log($('li:eq(1)')); //eq传入的是下标
-
- //根据下标获取为奇数的
- console.log($('li:odd'));
- //根据下标获取为偶数的
- console.log($('li:even'));
- console.log($('li:first'));
- console.log($('li:last'));
-
- //隔行变色(使用dom)
- let odd=$('li:odd')
- let even=$('li:even')
- for(var i=0;i
length;i++){ - odd[i].style.backgroundColor='red'
- }
- for(var i=0;i
length;i++){ - even[i].style.backgroundColor='blue'
- }
- $('div').prop('class','box')//设置
- console.log($('div').prop('class'));//获取
- //prop只能操作原生属性
- console.log($('div').eq(0).prop('id'));
- //对应不是原生获取的undefined
- console.log($('div').eq(0).prop('name'));
- //设置到对应的元素对象上 element.id element.name
- $('div').prop('content','我是内容') //设置
- console.log($('div').prop('content'));
-
- //attr 是原生的setAttribute getAttribute
- $('div').attr('message','ok')
- console.log($('div').attr('id'));
- console.log($('div').attr('name'));
- console.log($('div').attr('message'));
-
- //class属性操作
- //添加class
- $('p').addClass('box')
- $('p').addClass('red')
- //获取 通过attr或者prop获取
- console.log($('p').prop('class'))
- //删除class
- $('p').removeClass('box')
- //修改
- //先删再添加
- $('p').removeClass('red')
- $('p').addClass('blue')
- //切换 删除如果没有该属性就加上
- $('p').toggleClass('green')
- <li>1li>
- <li class="box">2li>
- <li>
- <span>span1span>
- <span>span2span>
- <a href="">连接1
- <p class="box">p>
- a>
- <a href="">连接2a>
- <a href="">连接3a>
- li>
- <li>4li>
- <li class="box">5li>
-
-
- //获取元素进行筛选
- console.log($('ul>li').eq(2)); //得到第三个li
- console.log($('ul>li').first()); //获取第一个
- console.log($('ul>li').last()); //获取最后一个
-
- //父子关系
- conlose.log($('ul>li').eq(2).parent('div'))//获取符合选择器的父元素(不符合就没有)
- console.log($('ul>li').eq(2).parent()); //获取对应的父元素
- console.log($('ul>li').eq(2).children()); //获取所有的子元素console.log($('ul>li').eq(2).children('a')); //获取所有的子元素a
-
- //兄弟关系
- //获取第三个li的第二个子元素的兄弟span标签
- console.log($('ul>li:eq(2)').children().eq(1).siblings('span'));
- //获取第三个li的第二个子元素的所有兄弟
- console.log($('ul>li:eq(2)').children().eq(1).siblings);
- //获取第三个li的前一个元素
- console.log($('ul>li:eq(2)').prev());
- //获取第三个li的前一个box元素(符合条件才返回结果)
- console.log($('ul>li:eq(2)').next());
- //获取第三个li的后一个box元素(符合条件才返回结果)
- console.log($('ul>li:eq(2)').next('.box'));
- //获取第三个li后面的所有
- console.log($('ul>li:eq(2)').nextAll());
- //获取第三个li后面的所有box
- console.log($('ul>li:eq(2)').nextAll('.box'));
- //获取第三个前面的所有
- console.log($('ul>li:eq(2)').prevAll());
- //获取第三个前面的所有box
- console.log($('ul>li:eq(2)').prevAll('.box'));
-
- //find 查找
- //查找所有子元素的内容找到对应的条件 对应的class名字为box
- console.log($('ul').find('.box'));
- //查找所有子元素内容找到对应的条件(跨级)
- console.log($('ul').eq(2).find('.box'));
-
- div{
- width: 100px;
- height: 100px;
- margin: 10px;
- padding: 20px;
- border: 30px solid yellow;
- }
-
- <div>div>
- <script src="./js/jquery.js">script>
- <script>
- //设置宽度 传参就是设置 没传就是获取
- //$('div').width(200)
- console.log($('div').width()); //返回number类型的值
- console.log($('div').height()); //返回number类型的值
-
- //innerWidth innerHeight (包含padding)
- console.log($('div').innerWidth());
- console.log($('div').innerHeight());
-
- //outerWidth outerHeight (包含padding和border)
- console.log($('div').outerWidth());
- console.log($('div').outerHeight());
- script>
-
- *{
- margin: 0;
- padding: 0;
- }
- div{
- margin:20px;
- position: relative;
- }
- p{
- position: absolute;
- left: 100px;
- top: 100px;
- margin-top: -10px;
- margin-left: -10px;
- transform: translate(30px,30px);
- }
- button{
- margin: 50px;
- transform: translate(50px,50px);
- }
-
- <div>
- <p>
- <button>按钮button>
- p>
- div>
- <script src="./js/jquery.js">script>
- <script>
- //获取当前的p标签在页面上的位置 获取当前元素在页面上的位置
- console.log($('p').offset()); //返回一个对象
- console.log($('p').offset().left);
- console.log($('p').offset().top);
- console.log($('button').offset());
-
- //获取当前的盒子在父元素内容的位置(不受margin的影响)
- console.log($('p').position());
- console.log($('button').position());
- script>
- <div>点击我div>
- <button>点击我button>
- <input type="text">
- <script src="./js/jquery.js">script>
- <script>
- //事件名 处理函数
- $('div').on('click',function(){
- console.log('点击了');
- })
- $('div').on('click',handler);
- function handler(){
- console.log('点击了1');
- }
- //取消事件监听
- $('div').off('click',handler)
- //one方法 执行一次
- $('div').one('mouseenter',()=>{
- console.log('鼠标移进');
- })
-
- //针对对应的事件的相关函数
- $('button').click(()=>{
- console.log('button点击了');
- })
- $('button').mouseenter(()=>{
- console.log('button移进');
- })
- $('button').mouseleave(()=>{
- console.log('button移出');
- })
- $('input').change(()=>{
- console.log('输入改变值');
- })
-
- //hover方法 结合了移进移出 (mouseenter和mouseleave)
- $('p').hover(()=>{
- console.log('移进');
- },()=>{
- console.log('移出');
- })
- script>
jquery的ajax对应的原生的ajax进行了封装xhr,他对应的xhr进行了功能的扩展但是ajax它在此基础上进行了增强它还支持其他的请求
是一种接口风格,他是从rest规范,他是以返回json格式数据,以请求的方式来区分对应的功能
get请求 获取数据
post请求 添加数据
delete请求 删除数据
put请求 修改一条数据
patch请求 批量修改数据
- $('button:eq(0)').click(()=>{
- //url地址 参数 回调函数
- $.get('https://jsonplaceholder.typicode.com/todos',{
- _limit:10
- },(res)=>{
- console.log(res);
- })
- })
- $('button:eq(1)').click(()=>{
- //url地址 参数 回调函数
- $.post('https://jsonplaceholder.typicode.com/posts',{
- username:'jack'
- },(res)=>{
- console.log(res);
- })
- })
- $('button:eq(2)').click(()=>{
- $.ajax({
- url:'https://jsonplaceholder.typicode.com/posts',
- data:{
- _limit:10
- },
- method:'get',
- timeout:3000,
- dataType:'json',
- success(res){
- console.log(res)
- },
- error(err){
- conlose.log(err)
- },
- copmlete(){
- conlose.log('完成了')
- }
- })
- })
- //option(只能传入number类型) 时间 回调函数
- $('div').animate({
- width:200,
- left:200,
- top:300,
- opacity:0.4
- },2000,()=>{
- console.log('动画完成了');
- })
-
- //显示隐藏 回调函数(变化宽高和透明度)
- $('div').show(2000,()=>{
- $('div').hide(2000)
- })
-
- // 显示隐藏 slideDown下拉
- $('div').slideDown(2000,()=>{
- $('div').slideUp(2000)
- })
-
- //切换toggle 显示隐藏
- $('div').toggle(2000,()=>{
- $('div').slideToggle(2000)
- })
-
- // 出去 进来(只改变透明度)
- $('div').fadeIn(2000,()=>{
- $('div').fadeOut(2000,()=>{
- $('div').fadeToggle(2000)
- })
- })
-
- 111
- //给jQuery对象扩展
- //第一个是名字 第二个是扩展的配置
- $.extend({
- myHello(){ //自定义的
- conlose.log('hello')
- }
- })
- //调用
- $.myHello()
-
- //给jQuery对象的方法扩展
- $.fn.extend({
- renderColor(){
- $(this).css('color','blue')
- }
- })
- $('div').renderColor()
- "height:100px">
- <span>我是内容span>
-
- <script src="./js/jquery.js">script>
- <script>
- //样式操作 获取样式 设置样式
- //传递一个参数就获取 传递两个参数就是设置(参数传满了就是设置)
- //可以获取所有的样式
- console.log($('div').css('backgroundColor'));
- console.log($('div').css('height'));
- //设置样式
- $('div').css('width','100px')
- //dom元素创建
- let jqueryObj=$('
我是新建的标签
') - console.log(jqueryObj);
-
- //添加
- $('div').append(jqueryObj) //从后面追加到div里面
- $('div').prepend(jqueryObj) //从前面追加到div里面
- $('div').before(jqueryObj) //插入到前面
- $('div').after(jqueryObj) //插入到后面
-
- //删除
- $('div').empty() //清空
- $('div').remove() //将自己删除
-
- //修改
- $('div').replaceWith($(''))
-
- //克隆 (深拷贝)
- let p=$('p').clone()
- console.log(p);
- script>
- <script src="./jquery.min.js">script>
- <script>
- console.log(jQuery);
- console.log($);
- //如果不传参数 默认干掉$ 传入true俩个都干掉
- let a = $.noConflict(true)
- console.log($);//被干掉了
- console.log(jQuery);
- console.log(a);
- script>