Jquery基础入门

Posted 2020-12-15 weiweivip666

Jquery入门

支持链式操作

$(‘.c1‘).addClass(‘c2‘).text(‘xxx‘).addClass(‘xxx‘).css({‘color‘:‘white‘});

jquery引入方式

外部网址引入

<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->

本地文件引入

<script src="jquery.js"></script>  //jquery.js本地文件路径

jquery对象与原生js中dom对象区别

jquery:

var d1 = $(‘#d1‘)

dom:

var a = document.getElementById(‘d1‘)

两者之间不能调用互相的方法

两者之间可以互相转换

    - dom对象---->jquery对象   $(dom对象)
      $(document.getElementById(‘d1‘));
    - jquery对象----->dom对象      jquery对象[0]
      $(‘#d1‘)[0]

选择器

id选择器

• $(‘#d1‘)

类选择器

• $(‘.c1‘)

元素选择器

• $(‘div‘)

组合选择器

• $(‘#d1,.c2‘);
  多个选择器中间用逗号隔开
• 可以直接连着设置css样式
  $(‘#d1,.c2‘).css(‘background-color‘,‘pink‘);
• 当直接用下标取值时，是dom对象
  var a = $(‘#d1,.c2‘);
  a[0]
• jquery对象需要用eq来取下标
  var a = $(‘#d1.c2‘);
  a.eq(1);
• 层级选择器
  (就是后代选择器)
  • $(‘div span‘);

自定义属性选择器

    - 如在span标签中自定义了  xx=‘x1‘的属性
      $(‘[xx]‘).css(‘color‘,‘red‘);
      $(‘[xx="x1"]‘).css(‘color‘,‘green‘);
      上面是两种自定义属性设置样式时的方法

表单对象属性选择器

• ：checked
  • 找到默认被选中的标签
• ：selected
  • 下拉框找到默认被选中的标签
• ：disabled
  • 找到被废弃的标签
• ：enabled
  • 找到可用的标签

表单选择器

• $(‘:text‘);
  找到所有input标签
  type=“text”标签
• $(‘:input‘);
  找到所有input标签
• $(‘:password‘);
  找到所有input标签
  中type=“password”标签
• $(":radio");
  找到所右input标签中
  type="radio"标签
• $(":checkbox")
  找到所有input标签中
  type="checkbox"标签

筛选器方法

• parent()
  找到父系
  • var a = $(‘.c1‘);
    a.parent()
• parents()
  找到直系的祖父辈
  • var a = $(‘.c1‘);
    a.parents()
• parentUntil("body");
  参数为要找到的父系为止
  不包括参数
  • var a = $(‘.c1‘);
    a.parentsUntil(‘body‘)
• children()
  找到所有的儿子标签
  • var a = $(‘ul‘);
    a.children()
• children(".c1")
  找到符合参数的儿子标签
  • var a = $(‘ul‘);
    a.children(‘.c1‘);
• next()
  找到下一个兄弟标签
  • var a = $(‘.c1‘);
    a.next()
• nextAll()
  找到下面的所有兄弟标签
  • var a = $(‘.c1‘);
    a.nextAll()
• nextUntil(‘.c2’)
  下面到某个兄弟为止,不包含那个兄弟
  • var a = $(‘.c1‘);
    a.nextUntil(‘.c2‘);
• prev()
  找到上一个兄弟标签
  • var a = $(‘.c1‘);
    a.prev();
• prevAll()
  找到上面所有兄弟标签
  顺序是反的
  • var a = $(‘.c1‘);
    a.prevAll();
• prevUntil(参数)
  直到找到指定参数的兄弟标签为止
  不包含参数兄弟
  • var a = $(‘.c2‘);
    a.prevUntil(.c1);
• siblings()
  找到不包含自己的所有兄弟
  • var a = $(‘.c2‘);
    a.siblings();
• siblings(参数)
  筛选兄弟中有指定参数的标签
  • var a = $(‘.c2‘);
    a.siblings(‘.c1‘);
• find()
  找后代
  • $(‘ul‘).find(‘span‘);
    • 等同于css的 li span选择器
• first()和last() 和eq(索引值)
  • $(‘li‘).first()
    • 找所有li标签中第一个
  • $(‘li‘).last()
    • 找所有li标签中最后一个
  • $(‘li‘).eq(0)
    • 按照指定索引取对应标签
  • $(‘li‘).eq(-1)
    • 取最后一个

text()和html()区别

取文本

• c.text()
  • 不带标签
• c.html()
  • 带标签

设置文本

• c.text(‘文本‘)

• c.html("文本")

  • 文本内容

    <a href=‘‘>皇家赌场</a>
    

类值class和val值操作

class类值操作

• 给标签中的类添加值
  • var a = $(‘div‘);
    a.addClass(‘c2‘);
• 移除标签中类值
  • var a = $(‘div‘);
    a.removeClass(‘c2‘);
• 有就添加没有就删除
  • var a = $(‘div‘);
    a.toggleClass(‘c2‘);
• 示例计时器
  • var a = $(‘div‘);
    setInterval(‘a.toggleClass("c2")‘,500)

val值操作

• 获取值
  • 获取文本输入框的输入的值
    • $(‘#username‘).val();
  • 单选radio框,被选中的值
    • $(‘.c1:checked‘).val();
    • 在.a1选择器的基础上在进行筛选
  • 多选checkbox框
    • 不能直接就用val来取值
    • 需要用for循环来
      • var a = $(‘:checkbox:checked‘)
        for (var i=0;i<a.length;i++){
        console.log(a.eq(i).val())
        }
  • 单选select下拉框
    • $(‘#s1‘).val()
  • 多选select下拉框
    • $("#s2").val()
• 设置值
  像单选多选之类
  设置值的时候全部用列表
  • 文本输入框
    • $(‘#username‘).val(‘you love me‘)
  • 单选框
    • $(‘.c1‘).val([2])
      注意内容必须是列表，
      写的是value属性对应的值
  • 多选框
    • $(‘.c2‘).val([‘2‘,‘3‘])
      单选或者多选设置值的时候，
      值可以是字符串，可以是数字
  • 单选下拉框
    • $(‘#s1‘).val(‘1‘)
  • 多选下拉框
    • $(‘#s2‘).val([‘2‘,‘3‘])

创建或添加标签的两种方式

添加标签但是这个属于替换内容,

将标签内原来的内容全部替换掉.

• $(‘.c1‘).html(‘<a href=‘http://www.baidu,com‘>百度</a>‘)
  

在body标签创建标签或在其他标签中添加标签

 $(‘<a>‘,{
   href:‘http://www.baidu.com‘
   text:‘这是一个标签‘,
   name:‘baidu‘,
   id:‘d1‘,
   class:‘c1‘
   }).appendto(‘div‘);
   在div标签中添加一个a标签
 ```
   $(‘<a>‘,{
   href:‘http://www.baidu.com‘
   text:‘这是一个标签‘,
   name:‘baidu‘,
   id:‘d1‘,
   class:‘c1‘
   }).appendto(‘body‘);
   在body标签中创建一个a标签


## 文档操作

### 标签内部的后面添加内容append

- 方式1
1.var a = document.createElement(‘a‘)
2.a.href=‘http://www.baidu,com‘
3.a.innerText = ‘京东‘
$(‘.c1‘).append(a)

- 方式2常用

```html
$(‘.c1‘).append(‘<a href="http://www.baidu.com">百度</a>‘)

标签内部的上面添加内容prepend

• $(‘.c1‘).prepend(‘<a href="">京东</a>‘)
  

标签外部的下面插入内容after

• $(‘.c1‘).after(‘<a href="">淘宝</a>‘)
  

标签外部的上面插入内容before

• $(‘.c1‘).before(‘<h1>大兄弟</h1>‘)
  

清空标签

方式1：

$(‘.c1‘).empty() 标签还存在
可以清空嵌套标签里面的单个标签。
也可以清空嵌套标签外层的标签，
会把里面嵌套的标签也同时清空。

方式2

    $(‘.c1‘).html(‘‘);
    $(‘.c1‘).text(‘‘);

删除标签

$(‘c1‘).remove();

删除单个标签。
要是删除的是最外层含有
嵌套的标签，里面的标签
同时也会被删除

字符占位符${变量名}

语法必须要用··符号table键上面那个符号

var username = ‘刘伟‘;
var s = my name is ${username};

attr/removeAttr属性操作

原生js属性操作

获取属性对应的值：dEle.getAttribute(‘placeholder‘);
添加属性或修改属性 : dEle.setAttribute(‘xx‘,‘oo‘);
删除属性：dEle.removeAttribute(‘xx‘);

jquery属性操作

• 添加或修改属性
  • 单个属性
    $(‘#d1‘).attr({‘xx‘:‘oo‘})
  • 多个属性
    $(‘#d1‘).attr({‘xx‘:‘oo‘,‘bb‘:‘dd‘})
• 查看属性
  • $(‘#d1‘).attr(‘xx‘)
• 删除属性
  • $(‘#d1‘).removeAttr(‘xx‘)
• 这些属性操作针对的是自定义属性和标签自带属性，都可以通过attr来进行操作，但是有些特殊属性，通过attr来进行操作的时候，会导致操作失效，就他们几个：selected checked disabled enabled

prop属性操作

主要是操作
selected checked disabled enabled

设置属性

四个类型都是这样设置

• $(‘#d1‘).prop(‘checked‘,true) 选中
• $(‘d1‘).prop(‘checked‘,false) 取消选中

查看属性

• $(‘#d1‘).prop(‘checked‘)
  true表示选中了,false表示未选中

逻辑运算符

and &&

or ||

not !

克隆

$(‘#d1‘).clone()

永远基于第一个克隆

$(‘#d1‘).clone(true);

点击哪个都能继续克隆

事件

两种绑定方式

    - 方式1
      $(‘#d1‘).click(function(){
         var a =$(this).clone(true)
          $(this).after(a);
      })
    - 方式2
      $(‘#d1‘).on(‘click‘,function(){
        var a = $(this).clone(true)
        $(this).after(a);
      })
      on关键字进行绑定，
      第一个参数为事件名称，
      第二个参数是函数，事件要做的事情

事件冒泡：

点击儿子标签会触发
父级标签祖父标签..
等等的所有点击事件,
这叫事件冒泡

• $(‘.c2‘).click(function () {
  alert(‘这是子标签‘);

  });
  //方式1 终止后续事件 常用
  $(‘.c1‘).click(function () {
  alert(‘这是父标签‘);
  return false; //终止后续事件发生
  })

  //方式2 终止后续事件
  $(‘.c1‘).click(function (e) {
  alert(‘这是父标签‘);
  return e.stopPropagation();
  })

事件委托

    - //$(‘.c1‘).on(事件,子选择器,函数)
      //注意,后面添加的子选择器中的class类属性值都要一样,这样才能委托父级标签
      $(‘.c1‘).on(‘click‘,‘.btn‘,function () {
          var a = `<button class="btn">干死你</button>`;
          $(this).after(a);
      });

常用事件

• focus
  获取光标时触发的事件

  • // focus获取光标时触发的事件
    $(‘#username‘).focus(function () {
    $(this).css({‘background-color‘:‘yellow‘});
    $(‘.c1‘).addClass(‘c2‘);

    });

• blur
  失去光标时触发的事件

  - //blur失去光标时触发的时间  
    $(‘#username‘).blur(function () {
        $(this).css({‘background-color‘:‘white‘});
        $(‘.c1‘).removeClass(‘c2‘);
    });
  

• change
  域区域内容发生变化时触发

  - $(‘select‘).change(function () {
        // $(‘.c1‘).toggleClass(‘c2‘);
        // console.log($(this));
        // console.log($(this).options);
        // console.log($(this).selectedIndex)
        // console.log(this);  //dom对象  $(this)jquery对象
        // console.log(this.options);//所有options标签
        // console.log(this.selectedIndex);//获取选中下标
        var option_text = this.options[this.selectedIndex].innerText;
        console.log(option_text);
        // if (option_text === ‘喝酒‘){}
    // 获取被选中的option标签的文本内容
    // $(‘:selected‘).text();
    });
  

• hover
  鼠标悬浮事件

  • jquery中用法
    直接在hover中写两个函数
    一个悬浮，一个离开

    - $(‘.c1‘).hover(function () {
      $(this).css({‘background-color‘:‘green‘})
      },function () {
      $(this).css({‘background-color‘:‘pink‘})
      });
  

  • js中用法
    需要用到两个关键字
    onmouseenter 鼠标进入
    onmouseout 鼠标出来
    • var a = document.getElementById(‘d1‘);
      //鼠标进入事件
      a.onmouseenter = function(){
      this.style.backgroundColor = ‘green‘;
      };
      a.onmouseout = function(){
      this.style.backgroundColor = ‘pink‘;
      }

• input事件

  - 根据用户输入的内容实时触发事件
    - $(‘#d1‘).on(‘input‘,function(){
      console.log($(this).val());
      })
  

页面载入

第一种方式：

window.onload
不推荐使用

• 页面加载事件
  当html文件中的所有的
  内容加载完成之后
  触发这个事件，和位置无关
  可以写在head标签中
  • window.onload=function(){
    $(‘.c1‘).click(function(){
    $(this).css({‘background-color‘:‘green‘});
    });
    }
    但是window.onload类似于一个全局事件，只能被
    赋值一次，再次赋值会覆盖原来绑定的事件中的操作
    window.onload 是当页面所有内容加载完成之后触发
    (包含视频、图片等等资源加载)

第二种方式：

jquery方式

• jquery的页面加载事件是当
  html文档中的所有标签内容
  加载完成之后触发，不要
  等待图片、视频等资源加载完成
  异步加载

       - $(document).ready(function(){
                $(‘.c1‘).click(function(){
                    $(this).css({"background-color":"green"})
                })
          })
        - 简写方式
         $(function(){
             $(‘.c1‘).click(function(){
                  $(this).css("background-color":"green")
                })
          })