web前端学习之jquery

程序员文章站 2024-03-17 13:12:40

...

#Web前端学习

jquery

JQ：
写的更少，做的更多

功能：
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

优点：
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

通过$(选择器)获取到的页面元素，是一个jq对象，不是一个DOM对象，
这个对象只能使用JQ中的方法，而无法使用DOM操作方法

在每次书写JQ代码时 都要加上一句话
		    $(function(){
		        书写我们所有的JQ代码
		        优点：避免了全局变量的污染，里面的代码会等到所有的DOM元素加载完后才会执行，避免出现出错误
		    })

JQ中的选择器：
基本选择器：
ID #IDName
类 .className
标签 tagName
通配符 *
并集 h1,div,.box1,#box
层级选择器：
后代 ul li
直接子元素 ul>li
相邻兄弟 div+p
兄弟 div~p
基本筛选器：
:first 表示获取第一个元素，只能获取唯一的一个元素
:last 表示获取最后一个元素，只能获取唯一的一个元素
:eq(1) 表示获取下标为1的元素，只能获取唯一的一个元素
:not(选择器) 表示获取除了括号中选择器选中的元素以外的元素
:even 表示获取下标是偶数项的所有元素
:odd 表示获取下标是奇数项的所有元素
:gt(index) 表示获取下标大于index的所有元素
:lt(index) 表示获取下标小于index的所有元素
:header 表示获取所有的标题标签也就是h1 – h6
:focus 表示获取所有有焦点的标签唯一一个
:has(选择器) 表示匹配含有选择器所匹配的元素的元素
.box:has§ 选择后代中含有p标签的并且类名是.box的元素
:input 获取所有的表单元素

    以下都是获取input中type类型值的标签:
	            :text 获取input输入框中type属性值是text的所有标签
	            :password
	            :radio
	            :checkbox
	            :submit
	            :image
	            :reset
	            :button  还可以获取button标签
	            :file

实现CSS样式的设置：
.css()方法
如果只需要设置一个样式，则需要给两个参数，第一个参数是样式名，第二个参数是样式值
$(“div”).css(“height”,“400px”)
如果需要同时设置多种样式，需要给一个参数，以对象形式设置样式内容
$(“div”).css({
width:“400px”,
height:“400px”,
background:“red”
})

	    addClass()方法  添加一个类名
	    removeClass()方法  删除一个类名
	    toggleClass()方法  添加和删除的切换，如果有就删除，如果没有就添加

JQ实现内容的操作
html()方法等同于DOM中的 innerHTML
text()方法等同于DOM中的 innerText
val() 方法获取和设置表单内容

JQ中实现DOM的增删改查
JQ对象与DOM对象之间的转换

   DOM对象转换为JQ对象
    var lis = document.getElementById("lis");
    var $lis = $(lis);

    JQ对象转换DOM对象
    var $lis = $("li");
    var lis = $lis[0]

创建节点：
var $lis = $("

");

插入节点：
A.append(B) 将B标签插入到A标签里面的末尾
B.appendTo(A) 将B标签插入到A标签里面的末尾

A.prepend(B) 将B标签插入到A标签里面的最前面
B.prependTo(A) 将B标签插入到A标签里面的最前面

A.after(B) 将B标签添加到A标签的后面，兄弟关系
B.insertAfter(A) 将B标签添加到A标签的后面，兄弟关系

A.before(B) 将B标签添加到A标签的前面，兄弟关系
B.insertBefore(A) 将B标签添加到A标签的前面，兄弟关系

删除节点：
A.remove() 将A标签整个删除掉
A.empty() 将A标签中的所有内容包括后代元素全部清空
A.detach() 将A标签整个删除，但是会保留元素上的绑定事件和附加数据

替换节点：
A.replaceWith(B) 将A替换成B
B.replaceAll(A) A被B所替换

JQ的查找节点：
A.children(“B”) 查找A元素中能匹配选择器B的所有子元素，不包括后代
A.next(“B”) 查找A元素的下一个兄弟元素并且能与B选择器相匹配的元素。
A.nextAll(“B”) 查找A元素后面所有的兄弟元素,也可以使用参数B来限定要选择的标签。
A.prev(“B”) 查找A元素的上一个兄弟元素并且能与B选择器相匹配的元素。
A.prevAll(“B”) 查找A元素前面所有的兄弟元素,也可以使用参数B来限定要选择的标签。
A.parent(“B”) 查找A元素的父元素，并且父元素需要满足选择器B的条件。
A.parents(“B”) 查找A元素的祖级元素，并且祖级元素需要满足选择器B的条件。
A.find(“B”) 查找A元素的后代元素B
筛选：
eq(index) 获取下标为index的标签

			    index()获取对应的下标

JQ中的事件
hover(fn,fn1) 表示鼠标进入离开事件，第一个参数表示进入事件执行的函数，第二个参数表示离开事件执行的函数

JQ中所有封装的事件函数都是以DOM2级事件绑定


off() 用于清除事件的绑定，括号中可以传入一个参数表示要清除的事件名，如果不给，则将该对象上的所有事件都清除掉

JQ中的动画
基本动画
hide(time,ease,fn) 隐藏
show(time,ease,fn) 显示
toggle(time,ease,fn) 显示与隐藏的切换
括号中第一个参数表示动画执行的时间，第二个参数表示运动曲线，第三个参数表示动画执行完要操作的内容

滑动动画 也可以设置三个参数，与基本动画一致
    slideDown(200)  滑下显示
    slideUp(200)   滑上隐藏
    slideToggle(200) 滑动显示与隐藏的切换

淡入淡出动画  原理就是利用透明度来更改
    fadeIn() 淡入效果
    fadeOut() 淡出效果
    fadeToggle() 淡入淡出的切换
    fadeTo() 实现不完全透明

自定义动画  设置自定义动画中不支持设置颜色，如果想要设置，需要添加JQ插件jquery.colorAnimations.js
    animate({
                width:"700px",
                height:"400px",
                backgroundColor:"red", 不支持
                borderRadius:"50%",
                color:"#ff0" 不支持
            },4000)



stop() 用来停止当前标签上所有的动画效果

JQ中的Ajax
    $.get(url,setData,fn)
        url 表示提交的地址
        setData 表示上传的数据
        fn 表示响应完执行的回调函数，函数的参数用于接收返回的数据
    $.post(url,setData,fn) 与get方式请求参数一样

    $.ajax({
        url:路径,
        type:提交方式,
        dataType:预期返回的数据格式，
        success:请求成功后的回调函数
    })

    跨域：
        同域是指相同的域名，端口号，HTTP协议
        跨域是指以上三点只要有一点不满足都是跨域
        www.baidu.com  www.baidu.cn
        www.baidu.com#8080   www.baidu.com#3000
        http://www.baidu.com
        https://www.baidu.com

web前端学习之jquery