博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery基本概念
阅读量:4694 次
发布时间:2019-06-09

本文共 1924 字,大约阅读时间需要 6 分钟。

1、jquery 是javascript封装成的库、框架

2、jquery的核心是:jQuery = $

原理:
(function(){
var jquery = function(){}
jquery.prototype={
addClass:function(){

}

}

var jq = new jquery();

window.$ = window.jQuery = jq;

})()

3、文档载入函数

//window.onload
1、页面所有内容加载完成后执行,包括图片、视频、外部js等内容
2、 只能加载一次
//文档载入函数
1、DOM结构加载完成之后加载
2、可以加载多次

4、DOM对象与jQuery的互相转换

DOM转换为jquery对象 原生外面包裹一个小括号

var oDiv = document.getElementById('div1');
$(oDiv)

jquery转换为DOM

var oDiv1 = $(oDiv);
方式一:oDiv1 = oDiv1.get(0);
方式二:console.log(oDiv1[0])

5、选择器

基础选择器:id选择器 class选择器 通配符(*) 元素选择器(div、input)
层级选择器:
ancestor descendant 找后代元素 find()
parent > child 找子代元素 children()
prev + next 找下一个兄弟 next()
prev ~ siblings 找下面所有的兄弟 nextAll();

5.1、查找

find() 查找到后代元素
next() 查找下一个兄弟节点
nextAll() 查找下面所有的弟弟节点
siblings() 查找除了自己以外的所有兄弟节点
prev() 查找上一个兄弟节点
prevAll() 查找上面所有的兄弟节点
parent() 找到父节点
parents() 找到祖先节点
children() 查找子代节点

5.2、过滤器

可见性过滤器
:visible 可见的元素 display:block;
:hidden 隐藏的元素 display:none;
基本过滤器
:first 匹配第一个元素 first()
:last 匹配最后一个元素 last()
:not 除了选中项, not()
:even 匹配所有偶数元素,索引从0开始
:odd 匹配所有奇数元素,索引从0开始
:eq 匹配选中元素,索引从0开始 eq()
:gt 匹配大于选中项的元素,索引从0开始
:lt 匹配小于选中项的元素,索引从0开始
内容过滤器
:contains 匹配包含给定文本的元素

有方法的基本过滤器有哪些:

:first :last :not :eq

6、动画
slideDown(1000) 通过改变高度,将元素缓慢展示 效果相当于 display:block
slideUp('slow') 通过改变高度,将元素缓慢隐藏 效果相当于 display:none
三种预定速度之一的字符串("slow", "normal", or "fast")
slow 600毫秒 normal 400 fast 200
show() 显示
hide() 隐藏

7、添加节点

把被添加元素放到既存元素内部的末尾处
$(被添加元素).appendTo(既存元素) 功能相当于appendChild
$(既存元素).append(被添加元素)

把被添加元素放到既存元素内部的头部

$(被添加元素).prependTo(既存元素)
$(既存元素).prepend(被添加元素)

8、script引用方式

8.1 下载到本地连接
src="../jquery-1.9.1.js"
8.2 直接引用线上连接
src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"

9、

html 相当于innerHTML
text 相当于innerText

10、

filter() 过滤 过滤所匹配的元素

11、css

设置css样式
css('属性名',属性值) 设置一个css样式
css({'属性名':属性值,'属性名':属性值,'属性名':属性值}) 设置多个css样式
css('属性名) 获取属性值

addClass 添加样式,不会覆盖本来的class

addClass(class名)
removeClass();
toggleClass();

转载于:https://www.cnblogs.com/mapsxy/p/9264447.html

你可能感兴趣的文章
MySQL批量SQL插入性能优化
查看>>
定义列属性:null,default,PK,auto_increment
查看>>
用户画像展示
查看>>
C#中StreamReader读取中文出现乱码
查看>>
使用BufferedReader的时候出现的问题
查看>>
linux安装图形界面
查看>>
博弈论之入门小结
查看>>
解决IE8下opacity属性失效问题,无法隐藏元素
查看>>
批处理文件中的路径问题
查看>>
hibernate出现No row with the given identifier exists问题
查看>>
为什么wait()和notify()属于Object类
查看>>
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同!
查看>>
导入properties时的坑
查看>>
配置NRPE的通讯
查看>>
shp系列(一)——利用C++进行shp文件的读(打开)与写(创建)开言
查看>>
匹配两个空格之间的字符。。。
查看>>
CSS 文字溢出 变成省略号 ...
查看>>
Spring事务
查看>>
java编程基础(三)流程控制语句
查看>>
让数据库跑的更快的7个MySQL优化建议
查看>>