jQuery篇

时间 2019-11-08

标签 jquery 栏目 JQuery 繁體版

原文原文链接

jQuery

1.为何使用jQuery?

js中window onload事件只能出现一次,若是出现屡次,后面的事件会覆盖掉前面的事件css
js代码容错差html
简单的动画效果实现很繁琐,例如简单的动画渐变效果jquery
jQuery的两大特色编程
- 链式编程:好比 .show() 和. html()能够连写为.show().html().数组
- 隐式迭代 : 隐式对应的是显式,隐式迭代的意思是: 在方法的内部循环遍历,而不用咱们本身再进行循环,简化咱们的操做,方便咱们调用app

2.什么是Jquery

Jquery是js的一个库,封装了咱们开发过程当中经常使用的一些功能,方便咱们调用,提升开发效率dom
js库是把咱们经常使用的复杂功能封装到简单的方法中,咱们用的时候,将库直接引入而后调用方法便可函数
使用步骤动画
导入包的代码必定要放在js代码的最上面this

3.入口函数

原生的js'的入口函数指的是:window.onload = function() {}

jQuery的入口函数,有如下几个写法

写法一: 文档加载完毕,图片不加字啊的时候,能够执行这个函数

 $(document).ready(function () {
            alert(1);
        })

写法二: 写法一的简洁版

 $(function () {
            alert(1);
        });

写法三: 文档加载完毕,图片也加载完毕的时候,在执行这个函数

 $(window).ready(function () {
            alert(1);
        })

jQuery入口函数与js入口函数的区别
- 书写个数不一样:
  - js的入口函数只能出现一次,出现屡次会存在事件覆盖效果
  - jQuery的入口函数<能够出现任意屡次,并不存在事件覆盖效果
- 执行时机不一样
  - js的入口函数是在全部的文件资源加载完成后,才执行,这些文件资源包括:页面文档,外部的js文件,外部的css文件,图片等
  - jQuery的入口函数,是在文档加载完成后,再执行,文档加载完成指的是:DOM树加载完成后,就能够操做DOM了,不用等到全部额外部资源都加载完毕

4.jQuery的$符号

jQuery使用$的缘由:书写简洁,相对于其余字符不同凡响,容易被记住,
Jquery占用了咱们两个变量: $和JQuery.在代码中这两个变量都是同样的

5.js中的DOM对象和jQuery对象的比较重点

两者的区别

经过Jquery获取的元素是一个jq对象数组,其中包含着原生js中的DOM对象,

对于这样一个div结构

 <div></div>
 <div id="app"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div></div>

js获取元素节点方式

     var myBox = document.getElementById("app");           //经过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box"); //经过 class 获取的是伪数组
    var divArr = document.getElementsByTagName("div");   //经过标签获取的是伪数组

jQuery获取这些元素节点的方式:(获取的都是数组)

 //获取的是数组，里面包含着原生 JS 中的DOM对象。
    　　console.log($('#app'));
    　　console.log($('.box'));
    　　console.log($('div'));

总结:jQuery就是把DOM对象从新包装一下,让其具备jQuery方法\

两者的相互转换

DOM对象转换为jQuery对象
- ```
 $(js对象);
```

jQuery对象转为DOM对象

 jquery对象[index];      //方式1（推荐）
 jquery对象.get(index); //方式2

jquery对象转换成了DOM对象以后,能够直接调用DOM提供的一些功能,如\

 $('div')[1].style.backgroundColor = 'yellow';
 $('div')[3].style.backgroundColor = 'green';

6.jQuery的选择器

分为基本选择器,层级选择器,属性选择器

基本选择器

 $("#id")         //id选择器
 $("tagName")     //标签选择器
 $(".className") //class选择器
 $("*")           //通用选择器
 
 $("div.c1")     // 交集选择器 找到有含有c1类的div标签
 $("#id, .className, tagName") //并集选择器

层级选择器

 $("x y");// x的全部后代y（子子孙孙）
 $("x > y");// x的全部儿子y（儿子）
 $("x + y")// 找到全部紧挨在x后面的y
 $("x ~ y")// x以后全部的兄弟y

属性选择器

 $('[href]')       //找全部含href属性的标签
 $('a[href]')     //找全部含href属性的a标签
 $('a[title="luffy"]') //找全部title属性是luffy的a标签
 $('a[title="baidu"]') //找全部title属性不是百度的a标签
 $('a[href^="https"]') //找全部href属性以https开头的a标签
 $('a[href$="html"]') //找全部href属性以html结尾的a标签
 $('a[href*="i"]') //找全部href属性中含有i的a标签
 $('a[href][title="luffy"]') //找全部含有href属性且title属性=luffy的a标签

7.jQuery的筛选器

基本筛选器

 :first // 第一个
 :last // 最后一个
 :eq(index)// 索引等于index的那个元素
 :even // 匹配全部索引值为偶数的元素，从 0 开始计数
 :odd // 匹配全部索引值为奇数的元素，从 0 开始计数
 :gt(index)// 匹配全部大于给定索引值的元素
 :lt(index)// 匹配全部小于给定索引值的元素
 :not(元素选择器)// 移除全部知足not条件的标签
 :has(元素选择器)// 根据含有某个后代筛选

表单筛选器

 type筛选器
 :text
 :password
 :file
 :radio
 :checkbox
 :submit
 :reset
 :button

其余属性筛选器

 :enabled
 :disabled
 :checked
 :selected

8.筛选器方法

 //找兄弟
 $("#id").siblings();// 兄弟们，不包含本身，.siblings('#id')，能够在添加选择器进行进一步筛选
 
 //找弟弟
 $("#id").next()
 $("#id").nextAll()
 $("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
 
 //找哥哥
 $("#id").prev()
 $("#id").prevAll()
 $("#id").prevUntil("#i2")

 //找祖辈
 $("#id").parent()
 $("#id").parents() // 查找当前元素的全部的父辈元素（爷爷辈、祖先辈都找到）
 $("#id").parentsUntil('body') // 查找当前元素的全部的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器均可以放到这里面使用。

 //找儿子
 $("#id").children();// 儿子们

 //过滤
 $("div").first() // 获取匹配的第一个元素
 $("div").last() // 获取匹配的最后一个元素
 $("div").eq(n) // 索引值等于指定值的元素，n是索引
 $("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素
 $("div").find("p") //后代选择器，在全部div标签中找后代的p标签
 $("div").filter(".c1") // 交集选择器，从结果集中过滤出有c1样式类的
 $("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

9.jQuery绑定事件

 为button按钮绑定单击事件，单机按钮弹出警告框
 $('button').click(
        function () {
            alert('wahaha')
        }
 )

10.jQuery操做标签

标签内文本操做

html标签元素中全部的内容

 为button按钮绑定单击事件，单机按钮弹出警告框
 $('button').click(
        function () {
            alert('wahaha')
        }
 )

text标签元素的文本内容

 //获取值：获取选中标签元素中的文本内容
 $('#box').text();
 
 //设置值：设置该全部的文本内容
 $('#box').text('<a href="https://www.baidu.com">百度一下</a>');

文档标签操做

插入标签

append和appendTo

 //追加某元素，在父元素中添加新的子元素。子元素能够为：stirng | element（js对象） | jquery元素
 父元素.append(子元素)
 
 //追加到某元素，子元素添加到父元素
 子元素.appendTo(父元素)

 //append
 var oli = document.createElement('li');
 oli.innerHTML = '哈哈哈';
 $('ul').append('<li>1233</li>');
 $('ul').append(oli);
 $('ul').append($('#app'));
 
 //appendTo
 $('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

注意:若是追加的jQuery对本来在文档树中,那么这些元素将从原位置上消失,简言之就是移动操做

prepend和prependTo

 // 前置添加， 添加到父元素的第一个位置
 父元素.prepend(子元素)；
 
 // 前置添加， 添加到父元素的第一个位置
 子元素.prependTo(父元素)；

after和insertAfter

 // 在匹配的元素以后插入内容 
 兄弟元素.after(要插入的兄弟元素)；
 要插入的兄弟元素.inserAfter(兄弟元素)；
 
 
 $('ul').after('<h4>我是一个h3标题</h4>')
 $('<h5>我是一个h2标题</h5>').insertAfter('ul')

before和onsertBefore

 // 在匹配的元素以前插入内容
 兄弟元素.before(要插入的兄弟元素)；
 要插入的兄弟元素.inserBefore(兄弟元素)；
  
 //示例
 $('ul').before('<h3>我是一个h3标题</h3>')
 $('<h2>我是一个h2标题</h2>').insertBefore('ul')

删除标签

 //删除节点后，事件也会删除（简言之，删除了整个标签）
 $(selector).remove(); 
 
 // 删除节点后，事件会保留
 $(selector).detach(); 
 
 // 清空选中元素中的全部后代节点
 $(selector).empty();

修改标签

 // selector被替换：将全部匹配的元素替换成指定的string、js对象、jquery对象。
 $(selector).replaceWith(content);
 
 // selector被替换：将全部的匹配的元素替换成p标签。
 $('<p>哈哈哈</p>')replaceAll(selector);
 // replaceWith 
 $('h5').replaceWith('<a href="#">hello world</a>') //将全部的h5标题替换为a标签
 $('h5').replaceWith($('#app')); //将全部h5标题标签替换成id为app的dom元素
 
 // replaceAll
 $('<br/><hr/><button>按钮</button>').replaceAll('h4')

克隆标签

 $('button').click(function() {
 
  // 1.clone()：克隆匹配的DOM元素
  // 2.clone(true)：元素以及其全部的事件处理而且选中这些克隆的副本(简言之，副本具备与真身同样的事件处理能力)
  $(this).clone(true).insertAfter(this);
 })

属性操做

atter()设置属性值或者获取值

 //获取值：attr()设置一个属性值的时候 只是获取值
 $('div').attr('id')
 $('div').attr('class')
 
 
 //设置值
 $('div').attr('class','box') //设置一个值
 $('div').attr({name:'hahaha',class:'happy'}) //设置多个值

removeAttr()移除属性

 //删除单个属性
 $('#box').removeAttr('name');
 $('#box').removeAttr('class');
 
 //删除多个属性
 $('#box').removeAttr('name class');

prop()

 // 查看属性
 $(selector).prop(property)
 
 // 设置属性
 $(selector).prop(property,value)
 
 // 设置多个属性
 $(selector).prop({property:value, property:value,...})

class类属性

addClass添加类名

 // 为每一个匹配的元素添加指定的类名。
 $('div').addClass("box");//追加一个
 $('div').addClass("box box2");//追加多个

removeClass移除类名

 // 从全部匹配的元素中删除所有或者指定的类。
 $('div').removeClass('box')；//移除box类
 $('div').removeClass();//移除所有的类

toggleClass类的切换

 // 若是存在（不存在）就删除（添加）一个类。
 $('div').toggleClass('box')
 
 $('span').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass('active')
 })

val表单控制Value属性

 // 获取值：用于表单控件中获取值，好比input textarea select等等
 $(selector).val()
 
 // 设置值：
 $('input').val('设置了表单控件中的值')；

css样式

 // css(直接修改css的属性来修改样式)
 $("div").css('color'); //获取
 
 $("p").css("color", "red"); //设置
 $("p").css({"color":"red","background-color":"yello"}); // 设置多个

盒子样式属性

内容:宽度(width)和高度(height)
内容+padding:宽度(innerWidth) 高度(innerHeight)

内容+padding+border:宽度(outerWidth) 高度(outerHeight)

 // 外部宽
  .outerWidth() //获取第一个匹配元素 ：内容+padding+border的宽
  .outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽
 
  .outerWidth(value) //设置多个，调整的是“内容”的宽
 
 //外部高
  .outerHeight() //第一个匹配元素：获取内容+padding+border的高
  .outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高
 
  .outerHeight( value ) //设置多个，调整的是“内容”的高

滚动条距离属性

 // 水平方向
 .scrollLeft()     //获取
 .scrollLeft( value )//设置
 
 // 垂直方向
 .scrollTop() //获取
 .scrollTop( value ) //设置