网址
JQ的初体验
jq的入口函数
$(document).ready(function() {
$("#btn1").click(function() {
$("div").show(100);
});
jq设置文本内容
html() text() val()
val()这个是用在 文本框的内容设置获取等
show()显示 hide() 隐藏
jq会自动地遍历
不用担心兼容问题
同一元素注册相同事件不用担心覆盖
jq动画
show() slideDown() fadeIn()
jq 1.12 版本 兼容 ie678
jq的函数 是在页面 加载完成后执行
jq的入口函数 写法
第一种
$(document).ready(function() {
console.log("这是jq");
})
第二种
$(function() {
console.log("哈哈");
})
- jq的入口函数会等待页面的加载完成才执行,但是不会等待图片的加载
- js的入口函数会等待页面的加载完后曾,并且会等待图片加载我弄成才开始;
使用jq步骤
引入文件
写入口函数
功能实现
jq与DOM区别
使用js获取的元素就是js对象 dom对象
使用jq对象获取的元素就是jq对象
两者的联系
jq对象就是js对象的集合,伪数组,里面存放了一大堆的js对象
js和jq对象不能混着用 必需转换才可以
jq对象调用js对象
需要把jq对象转为js对象
DOM对象转换为js对象
花钱 就可以了 $就可以了
var cloth = document.getElementById('cloth');
$(cloth).text("哈哈");
jq转换为js对象
######第一种 $li[0] 下标
取出来 就可以 使用下标 取出来
$li[0] 就是取出来
第二种 get() 方法
$li. get(0)
$li.get(0).style.backgroundColor = "red";
jq隔行变色
获取的 li 就是 一个数组 可以循环遍历
$符号的实质
其 实 就 是 一 个 函 数 , 以 后 使 用 其实就是一个函数 ,以后使用 其实就是一个函数,以后使用 $ 记得使用小括号
//参数不同,功能不同
3种用法
1 入口函数的写法
$(function (){
})
2 $(domobj) 把dom对象转换成jq对象
var cloth = document.getElementById('cloth');
$(cloth).text("哈哈");
3.参数可以是字符串
$("div") $("#btn") $(".current") 用来找对象的
$("div ul")
jq的基本选择器
jq设置样式 css(name,value);
leg
$("#four").css("backgroundColor", "red");
并集选择器
$("#four,.green").css()
交集选择器
$(".green.yellow").css("backgroundColor", "pink");
后代选择器
$(“s1 s2”)
子代选择器
$(“s1>s2”)
#####过滤选择器 odd $(“li:even”)
$( "li" ).filter( ":even" )
$("li:even")
两种写法
$("li:even").css("backgroundColor", "red"); 过滤掉偶数
$("li:odd").css("backgroundColor", "cyan"); 过滤掉奇数
$("li:lt(1)").css("fontSize", "32px");
:first 第一个
:last 最后一个
$("li:eq(index)") 选择具体一个
gt(index) 查找索引大于某数
lt(index) 查找索引小于某数
mouseenter与mouseover的区别
- 1 mouseover 鼠标经过事件
mouseout鼠标离开事件
- 2 mouseenter 鼠标进入事件
mouseleave 鼠标离开事件
这两者的区别是 1 一个会连续触发事件 2 鼠标进入后在取子代选择器不会连续触发
所以建议使用2
children(ul) 找到所有的儿子 并且是ul
筛选选择器
$(function () {
$(".wrap>ul>li").mouseenter(function () {
$(this).css("opacity", "1").siblings().css("opacity", "0.4");
});
$(".wrap").mouseleave(function () {
//让所有的li都变亮
//$("li");
//$(".wrap li");
//$(".wrap>ul>li")
//$(this).children().children("li");
$(this).find('li').css("opacity", 1);
});
});
案例 鼠标进入一个高亮 其余暗淡
$(this).css("opacity", 1).siblings().css("opacity", 0.5);
next() 下一个兄弟
find()相当于后代选择器 查找所有子代元素
手风琴案例
#####下一个兄弟:nextElementSibling
next 相邻下一个兄弟
slideDown 向下滑动显示
slideUp 向上滑动隐藏
淘宝精品案例
$("#center>li:eq(" + index + ")").show().siblings().hide();
这里的li里面的eq需要插入字符串 拼接
$("#center").children("li").eq($index).show().siblings().hide();
这里的eq的是方法 eq($index)