Jquery基础入门

2022-09-23 10:41:51

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")
              })
        })