Jquery基础入门

原创

wx62aaee4be59a4 2022-06-17 07:00:31 博主文章分类：前端HTML学习 ©著作权

文章标签 选择器 css jquery 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者wx62aaee4be59a4的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

-------------------------------------------

个性签名：代码过万，键盘敲烂！！！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，博主在此感谢！