jquery:
1.介绍
jquery是js的一个框架
封装了底层js
2.特点
-
轻量级：
文件大小较小 argularjs（重量级框架） -
强大的选择器
document.getElementsByTagName() 类似css，并进行了扩展 $("#one")//选择id为one的元素 -
出色的dom封装和可靠的事件处理机制: 大部分jquery的方法返回值均为jquery对象 ie8: attachEvent -
不污染顶级变量 浏览器： window var a=10; linux： global html: var version='1.0'; -
完善的ajax: getData(url,handler) getData("http://",function(){ }); -
链式操作方式:
···
Array.prototype.slice.call(lis).forEach()function say(){ return "hello" } say().forEach();//forEach数组的方法 $(".one").each();
··
-
出色的浏览器兼容性
dom 都有兼容性 bom
3.安装/使用
1.cdn
cdn
2.下载
在页面引入
jQuery: 构造函数/对象
有原型对象 jQuery.prototype
4.jquery函数的调用及参数
[class='one']
-
参数为选择器
字符串类型-》选择器 jQuery("#one"); 返回值为类数组对象：jquery类型 jQuery("div[class='one']"); 简写： jQuery->$ $("#one") $("div[class='one']")  -
参数为dom对象
var div=document.getElementById("one");//获取一个dom对象 console.log(div)；//打印dom var result=$(div);//dom转换成jquery console.log(resule)//打印jquery console.log(resule[0])//把jquery转化为dom `` dom->jQuery(dom) 将dom转换为jquery对象 jquery->dom jquery[index] -
参数为html文本字符串
$("<p>hello</p>")//返回值为jquery对象 1.创建dom对象 2.将dom对象转换为jquery对象 -
匿名函数
$(function(){})
当文档 结构加载完毕后再执行函数
效率更高
–>
window.onload:
当文档加载完毕之后再执行函数
5.选择器
类似css中选择器
扩展
1、基本选择器
id选择器 $("#first")
类选择器 $(".one")
标签选择器 $("div")
逗号选择器 $("#first,.one")
组合选择器 $("div#first")
通配符选择器$("*")
2、层次选择器
子代
后代
下一个兄弟
相邻兄弟
3、基本筛选器-过滤器
注意：过滤器一般放在标签后使用
:first
获取选择到元素中的第一个
测试：
$("div:first")
:last
获取选择到元素中的最后一个
测试：
$("div:last")
:odd
获取选择到元素中的奇数,注意，索引从0开始
测试：
$("div:odd")
:even
获取选择到元素中的偶数
测试：
$("div:even")
:eq(index) 等于
获取所有已经选择到的元素索引为index
测试：
$("div:eq(3)")
:lt(index) 小于
获取所有已经选择到的元素索引小于当前索引的元素
测试：
$("div:lt(3)")
:gt(index) 大于
获取所有已经选择到的元素索引大于当前索引的元素
测试：
$("div:gt(3)")
4、内容过滤器
:contains("文本字符串")
获取已选元素中的文本字符串
举例：
$("div:contains('今天周一')"
:empty
获取没有子元素的元素
:parent
获取有子元素的元素
5、可见性选择器
:hidden
选择所有不占据屏幕空间的元素
测试:
$("div:hidden")
:visible
选择所有占据屏幕空间的元素
测试:
$("div:visible")
6.事件绑定
6.1 bind ，on
$("div").bind("clink",funcution(){ alert("hello");});//给每个div绑定事件
function handler(){//给函数起名字
alert("hello");
}
$("div").bind("click",handler);//事件绑定
$("div").unbind("click",handler);//事件解绑
bind("type",handler)
unbind("type",handler)
on("type",[selector],handler)
("div").on("click","p",function(){alert();});
off("type",[],handler);
简写：
以事件类型作为函数名称
click(function(){
if(){}
});
submit(function(){});
one():只绑定事件一次
trigger():模拟执行
$("div").click(function(){ alert()});
6.2代码测试
事件
1) 事件绑定方式
on()
测试：
$(".one").on("click",function() {
alert(1)
})
2) 事件类型
绑定点击事件
$(".one").on("click",function() {})
移除事件/解绑事件
$(".one").off("click")
绑定一次性点击事件
$(".one").one("click",function() {})
模拟点击事件
$('div').trigger('click')
光标悬浮
$(".one").on("hover",function() {})
聚焦
$(".one").on("focus",function() {})
失去焦点
$(".one").on("blur",function() {})
光标移入
$(".one").on("mouseover",function() {})
光标移出
$(".one").on("mouseout",function() {})
3) 快捷绑定
$(".one").click(function() {})
4) 事件代理
$("ul").on("mouseover",function() {
$(event.target).css("background-color","pink")
})
$("ul").on("mouseout",function() {
$(event.target).css("background-color","#fff")
})
$("ul").on("mouseover",'li',function() {
$(this).css("background-color","pink")
})
$("ul").on("mouseout",'li',function() {
$(this).css("background-color","#fff")
})
7.dom操作
a.append(b):
将b追加给a的内容末尾
a.appendTo(b):
将a追加给b之后
8.属性方法
1) attr()
含义：
设置或返回被选元素的属性值，不同的参数会有不同的作用
用法：
1. 返回被选元素的属性值
$(selector).attr(attribute)
attribute 规定属性的名称
测试：
console.log($("div").attr("class"))
2. 设置属性值
$(selector).attr(attribute,value)
attribute 规定属性的名称
value 规定属性的值
测试：
$("div").attr("style","font-size:40px")
3. 设置多个属性值
$(selector).attr({attribute:value, attribute:value ...})
测试：
$("div").attr({
"style":"font-size:40px",
"style":"color:pink"
})
attr和prop区别：
2) removeAttr(name)
从匹配的元素中删除一个属性
<button>切换图片</button>
<img src="../bootstrap/data3.jpg" alt="">
var btn = $('button');
btn.on('click',function(){
$('img').removeAttr('src');
})
3) addClass(class)
为匹配的元素添加指定的类名
<p>段落一</p>
<p>段落二</p>
<button>给第一个 p 元素添加一个类</button>
var btn = $('button');
btn.on('click',function(){
$("p:first").addClass("info");
})
.info {
background-color: red;
}
4) html()
取得第一个匹配元素的html内容(如果选择器匹配多于了一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取)
<div>段落一</div>
<div>段落二</div>
<button>获取文本内容</button>
var btn = $('button');
btn.on('click',function(){
var divs = $("div").html();
console.log(divs); // 段落一
})
5) text()
取得所有匹配元素的文本内容
无参数：(获取文本)
<div>段落一</div>
<div>段落二</div>
<button>获取文本</button>
var btn = $('button');
btn.on('click',function(){
var divs = $("div").text();
console.log(divs); // 段落一段落二
})
有参数：(设置文本)
<div>段落一</div>
<div>段落二</div>
<button>获取文本</button>
var btn = $('button');
btn.on('click',function(){
$("div").text('hello world');
})
6) val()
获取匹配表单元素的值
无参数：(获取)
<input type="text">
<button>获取</button>
var btn = $('button');
btn.on('click',function(){
var input = $("input").val();
console.log(input);
})
有参数：(设置)
<input type="text">
<button>获取</button>
var btn = $('button');
btn.on('click',function(){
$("input").val('hello');
})
7) css
含义：
访问匹配元素的样式属性
语法：
$A.css('color') 获取A的color值
<div class="one">1</div>
<div>2</div>
<div>3</div>
.one{
color: #ccc;
}
console.log($('.one').css('color')); // 通过选择器添加的样式也可以获取到
9.静态方法
数组及对象操作：each、map、toArray、merge:
each->forEach()
map->map
toArray():转换为array类型
merge:将数组合并
测试操作：type、isEmptyObject、isPlainObject、isNumeric
字符串操作：param、trim、parseJSON
isEmptyObject: 判断参数是否为空对象
isPlainObject:
判断参数是否为纯对象
isNumeric:
判断参数是否为number值
number/“number”-》true
param(obj)
parseJSON(str)
10.节点操作
插入节点
末尾追加
append
测试：
$('li:last').append($("<div>追加</div>"))
appendTo
测试：
$("<div>追加</div>").appendTo($('li:last'))
元素之前添加
prepend
测试：
$('li:last').prepend($("<div>追加</div>"))
prependTo
测试：
$("<div>添加</div>").prependTo($('li:last'))
插入
元素之后添加兄弟节点
after()
测试：
$('li:last').after($("<div>测试</div>"))
insertAfter()
测试：
$("<div>测试</div>").insertAfter($('li:last'))
before()
测试：
$('li:last').before($("<div>测试</div>"))
insertBefore()
测试：
$("<div>测试</div>").insertBefore($('li:last'))
包裹节点
wrap()
为每一个匹配元素外层再包裹上一个html元素
测试：
$("li").wrap("<h1><h1>")
wrapAll()
给所有匹配元素最外层包裹上一个html元素
测试：
$("li").wrapAll($("<h2></h2>"))
wrapInner()
为每一个匹配元素的子元素外层包裹一个html元素
测试：
$("p").wrapInner("<h3>hello</h3>")
替换节点
replaceWith()
A.replaceWith(B)
将A替换成B
测试：
$("li:last").replaceWith("<div>替换<div>")
replaceAll()
B.repalceAll(A)
将A替换成B
测试：
$("<div>替换<div>").replaceWith("li:last")
移除节点
remove()
无参数：移除所有div元素
$("div").remove()
有参数：移除id为one的p标签
$("p").remove("#one")
empty()
清空所有子元素，父级节点调用
克隆节点
clone()
clone(false)
false:浅复制（只复制当前元素的样式及内容）
clone(true)
true：深复制（复制元素属性，样式，元素内容，事件）
11.ajax
http://47.106.244.1:8099/manager/category/findAllCategory
扫一扫
4692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
