学习JQ
jq jQuery 可以把它理解为一个插件 被人封装好的方法或属性的一个集合来给大家使用的
不需要去研究太深， 会使用就可以
底层源码还是原生js来去完成
jQuery 它有一个别名 $
使用 jQuery？
引入jQuery的依赖
ready 其实很是类似于JavaScript onload 事件
页面加载完以后才去执行
ready 只是加载当前的页面完成就可以了
onload 加载当前页面并且还得加载完页面的一些依赖 才能执行
$(document).ready(function(){
// 页面加载完成后执行以下的程序
})
简写:
$(function(){ // ready 是一样的
});
选择器
标签选择器 标签名
// 标签选择器
var box = $("div"); // 获取的是一个集合
// var box = document.getElementsByTagName('div');
类选择器 class名
// 类选择器 class名 .代表类
// var ps = $(".re"); // 只能找到class是re的标签 也是一个集合
// document.getElementsByClassName('re');
var ps = $("p");
console.log(ps);
id选择器 id名
// id选择器 id名 #代表id
var box = $('#box'); // 是一个集合
console.log(box);
群组选择器
// 群组选择器 多个选择器之间用,来分割
var box = $('div,p,h1,span');
console.log(box);
后代选择器
//var p = $('div p'); // div 下面所有的p都找到
//console.log(p);
子代选择器
var px = $('div>p'); // 只能找到div的子集的p
console.log(px);
通配选择器
var box = $("*"); // 找到整个文档中的所有元素
console.log(box);
伪类选择器
var p = $('div>a:link');
console.log(p);
层级选择器
$("div span")//选择<div>里所有<span>元素
$("div>span")//选择<div>元素下元素名为<span>的元素
$('prev+next')//选择紧接在prev元素后的next元素
$('prev~siblings')//选择prev元素之后的所有sibling元素
var box = $('#box'); // box
var h1 = $('#box+h1') // + 代表找兄弟集元素 只能找到紧挨着的
console.log(h1);
var ss = $('#box+div');
console.log(ss);
过滤选择器
:first :last
var p = $('div>p:last'); // 先找到p集合 :first 找到第一个
// :last 找到最后一个
console.log(p);
:even :odd
:even 找到索引为偶数的所有元素
:odd 找到索引为奇数的所有元素
// :even :odd
var p = $('div>p:even').css('background','blue');
var p = $('div>p:odd').css('background','green');
:eq() 选取索引等于index的元素
var num = 0;
$('div>p:eq('+num+')').css('color','red');
$('#btn').click(function(){
num++;
if(num == $('div>p').length){
num = 0;
}
$('div>p').css('color',"");
$('div>p:eq('+num+')').css('color','red');
})
:gt() :lt()
gt 选取索引大于index的元素
lt 选取索引小于index的元素
var gt = $('div>p:lt(2)');
console.log(gt);
:header 找到区域内所有的标题
var h = $('div :header');
console.log(h);
:animated （选取当前正在执行动画的所有元素）
内容过滤器
:contains(text)//选取含有文本内容为text的元素
var p = $('p:contains("00")');
console.log(p);
:empty //选取不包含子元素或者文本的空元素
:has(selector)//选取含有选择器所有匹配的元素的元素
jq DOM 操作
获取页面内的元素
修改页面元素 内容 样式 size
添加
删除
创建
复制
获取
$('选择器') 获取到页面的元素
创建
$("<p></p>").html("ssssss")； p.innerHTML = "ssss"
添加
append()//向每个匹配的元素内部追加内容
appendTo()//将所匹配的元素追加到指定的元素中；$(a).appendTo(b)将a追加到b中
prepend()//向每个匹配的元素内部前置内容，如$("p").prepend("<b>您好</b>");产生<p><b>您好<b>Walkingp</p>
prependTo()//将所匹配的元素前置到指定的元素中。如$("<b>您好</b>").prependTo("p");
after()//在每个匹配的元素之后插入内容，如$("p").prepend("<b>您好</b>");产生<p>Walkingp</p><b>您好</b>
insertAfter()//将所有匹配元素插入到指定元素的后面，如$("<b>您好</b>").insertAfter("<p>");
before()//在所匹配的元素之前插入内容，如$("p").before("<b>您好</b>")产生：<b>您好</b><p>walkingp</p>
insertBefore()//将所匹配的元素插入到指定的元素的前面，如$("<b>您好</b>").insertBefore("p")
属性和样式的操作
属性：
attr()
获取属性的值和设置属性
attr('属性名') 获取属性的值
attr('属性名','属性值') 设置属性
注意: attr 可以设置自定义属性 如果设置或者获取元素本身就自带的属性 建议使用prop
prop()
获取属性的值和设置属性
prop('属性名') 获取属性的值
prop('属性名','属性值') 设置属性
注意: prop 主要正对于元素原本就自带的属性
removeAttr() 删除属性
样式：
addClass 添加一个类来
removeClass 删除一个类
css() 改变样式
hasClass 判断元素有没有一个类 有这个类就返回true 没有就返回false
$('div').hasClass('box');
val()
获取input select 这些元素的值
和原生js中的 value 是一样的功能
val() 获取值
val('值') 设置值
节点操作
// 原生js
childNodes parentNode children previousSibling .....
// jq
children() //取得匹配元素的子元素集合 Element 没有text
next() //取得匹配元素后面紧邻的同辈元素
prev() //取得匹配元素前面紧邻的同辈元素
siblings() // 取得匹配元素前后所有的同辈元素集
closest() //取得最近的匹配元素
var child = $('#box').children(); // 找到 $('#box')的子元素
console.log(child);
var pre = $('#box').prev(); // 找到$('#box')前面的第一个同辈元素
console.log(pre);
var next = $('#box').next(); // 找到$('#box')后面的第一个元素
console.log(next);
var preAll = $('#box').prevAll(); // 找到$('#box')前面的所有的同辈元素
console.log(preAll);
var nextAll = $('#box').nextAll(); // 找到$('#box')后面的所有元素
var sb = $('#box').siblings(); // 找到除了$('#box')所有的同辈元素
console.log(sb);
事件：
bind
给绑定一个事件
.bind('事件类型'，fun)；
例： .bind('click',fun)
.click(fun)
hover(enter,leave)方法
//模拟光标悬停事件，光标移动到 元素上触发enter函数，移出元素时触发leave函数。
$('div').hover(function(){
$(this).css({"width":"200px","height":"200px"});
},function(){
$(this).css({"width":"100px","height":"100px"});
})
事件解除绑定
.bind 绑定 -------- unbind 解除绑定
.off() 解除绑定
trigger()
trigger可为元素一次性绑定多个事件。
$('button:first').click(function(){
update($("div>span:first"))
})
$("button:last").click(function(){
update($("div>span:last"))
$('button:first').trigger('click');
})
function update(j) {
var n = parseInt(j.html(), 10);
j.html(n + 1);
}
动画
show() 让元素显示
hide() 让元素隐藏
var flag = true;
$('button').click(function(){
if(flag){
$('.box').hide();
}else{
$('.box').show();
}
flag = !flag;
})
fadeIn([arg])//提升已降低透明度的元素，直到显示；即“淡出”；
fadeOut([arg])//降低元素透明度，直至隐藏，style值为"none"；即 “淡入”
var flag = true;
$('button').click(function(){
if(flag){
$('div').fadeOut(10000);
}else{
$('div').fadeIn(5000);
}
flag = !flag;
})
slideUp()//元素由下到上缩短隐藏
slideDown()//元素由上到下伸展
var flag = true;
$('button').click(function(){
if(flag){
$('div').slideUp(400);
}else{
$('div').slideDown(400);
}
flag = !flag;
})
网友评论