设置jquery中的css样式
设置css样式语法1 css({"propertyname":"value","propertyname":"value",....})
$("#div1").css({"top":x,"left":y})
设置css属性,语法2 css("propertyname","value");
$("#div1").css("top",y).css("left",x);
设置css语法3:jquery对象转js对象,用对象[下标].style.属性名 = 属性值;
$("#div1")[0].style.top = x;
$("#div1")[0].style.left = y;
jquery页面加载函数
(1)jquery页面加载方法1,在jquery1.x的版本中可以使用
$(window).load(function (){ //需要等待页面加载完毕才执行---速度慢
console.log("长风破浪会有时,直挂云帆济沧海!");
});
(2)jquery页面加载方法2
$(window).ready(function (){//页面中的基本元素加载完就可以执行了----速度快
console.log("青山横北郭,白水绕东城1")
});
(3)jquery页面加载方法3,使用的最多 语法 $();
$(function () {//页面中的基本元素加载完就可以执行了----速度快
console.log("长风破浪会有时,直挂云帆济沧海");
});
对比原生js选择器和jquery选择器
1.(1)原生js dom 根据id获取元素
document.getElementById("p1").innerText = "aaa";
(2)使用jq 根据id获取元素,修改文本内容,调用 text(文本内容) 方法
$('#p1').text("aaaa");
2.(1)原生js dom 根据class获取元素,得到的是一个标签数组,需要遍历或者直接加下标
document.getElementsByClassName("dql")[0].style.color = "red";
(2)jq 根据class获取元素: $(".类名"),jquery自动帮我们遍历处理每个元素(隐含遍历)
$(".dql").css("color","red");
3.(1)原生js dom getElementsByTagName得到的是一个数组,访问时需要加上[下标]
document.getElementById("yf").getElementsByTagName("span")[0].style.border = "2px solid red";
(2)jquery 分为后代选择器,直接子元素选择器
$("#xln>span") 直接子元素选择器 ,先找id="xln",再找儿子
$("#xln>span").css("border","2px solid red");
$("#xln span")后代选择器,先找id = 'xln'的标签,再找它的后代<span>,子子孙孙都可以
$("#xln span").css("border","2px solid red");
兄弟选择器
兄弟选择器,$("选择器1~选择器2") : 选择器1后面的兄弟选择器2对应的元素
$("#p2~p").css("color","red");
*选择后面的所有元素
$("#p2~*").css("font-size","35px");
直接兄弟选择器,$("选择器1+选择器2") : 选择器1后面的直接兄弟选择器2对应的元素
$("#p2+p").css("border","1px solid red");
this在jquery中的使用
可以使用this.value来设置和获取value的值
也可以将this转成jquery对象
$(this).val("内容"); 修改文本的内容
$(this).val(); 获取文本内容
样式修改细节
js对象.style.backgroundColor = "颜色"; 属性名去掉中间的-,使用驼峰命名法,设置了行内样式
document.getElementsByClassName("class1")[0].style.backgroundColor = "red";//正确的
document.getElementsByClassName("class1")[0].style.background-color = "red";//错误的
$(".class1").css("backgroundColor","blue");//正确的,和js中写法一样
$(".class1").css("background-color","blue");//正确的,和css中写法一样
交集选择器
交集选择器,需要同时符合选择器的要求,才能选中
$("选择器1选择器2..."),两个或多个选择器之间不要加空格等字符,选择同时满足这个条件的标签
$("h3.class1").css("color","red");
$("p.class2").css("color","blue");
子元素选择器
//父级对象.children() 找直接小孩,间接不管(只管子女,孙子辈或者更小的就不管了)
$("#container").children().css("font-size","30px");
//父级元素.children(选择器),先找父级元素,再找儿子辈并且只要children方法中指定的选择器
$("#container").children("span").css("background","red");
并集选择器 $("选择器1,选择器2,选择器3...")
并集选择器,对几个选择器选择的标签都起效果
$("h2,h3").css("border","2px solid red");
第一个选择器是 .cls1>span 第二个选择器是.cls2
$(".cls1>span,.cls2").css("color","blue");
几个常用方法
jquery对象.css(参数) 用来设置样式
jquery对象.val(参数) 用来设置value的值
jquery对象.text(参数) 用来设置标签中的文本,相当于原生js DOM中的innerText
jquery对象.html(参数) 用来设置标签中的文本,相当于原生js DOM中的innerHTML
jquery对象.val() 用来获取value的值jquery对象.text() 用来获取标签中的文本,相当于原生js DOM中的innerText
jquery对象.html() 用来获取标签中的文本,相当于原生js DOM中的innerHTML\
链式调用
链式调用:不停的调用一些方法:
对象.方法(参数).方法(参数).方法(参数)...
要求每次调用都能返回当前对象
在jquery中一般情况下,对对象进行设置,返回值一般都是当前对象,一般都可以使用链式调用
反面的例子: 对象.text()的返回值就是文本,不是原来的对象,用链式调用就不合适了
$("#container>p").css("font-size","30px").css("color","pink").css("border","1px solid red");
奇偶选择器
//下标是从0开始的 偶数0,2,4,6... 奇数1,3,5,7...
//odd 奇数 even 偶数
$("#ul1>li:odd").css("background","red");//奇数行设置为红色
$("#ul1>li:even").css("background","pink");//偶数行设置为粉色
光标小手css样式 cursor:pointer;
鼠标进入和离开事件
mouseenter 鼠标进入事件
mouseleave 鼠标离开事件
索引选择器(下标都是从0开始的)
(1)eq对应着英文单词equals, :eq(下标) $("#ul-1>li:eq(0)") id="ul-1"下面的li,然后索引为0的元素
$("#ul-1>li:eq(0)").css("border","1px solid red");
(2)lt对应英文单词 less than 小于
:lt(3) 小于3,取值范围为0,1,2
$("#ul-1>li:lt(3)").css("backgroundColor","lightgreen");
(3)gt对应英文单词 greater than 大于
$("#ul-1>li:gt(4)").css("font-size","35px");
(4)分两步思考先执行
第一步:#ul-1>li:gt(5)
第二步:在上一步的基础上:lt(3) less than 3 0,1,2
$("#ul-1>li:gt(5):lt(3)").css("color","red");
添加删除样式类
添加类 addClass(参数) jquery对象.addClass("类名") 参数中不要加小圆点
$("#container>p").addClass("class1");
$("#container>p").addClass("class1").addClass("class2");
$("#container>p").addClass("class1 class2 class3");//将多个类名写在一起,中间用空格来分割
删除类 removeClass(参数)
$("#container>p").remove("class1");
$("#container>p").removeClass("class1").removeClass("class2").removeClass("class3");
$("#container>p").removeClass("class1 class2 class3");
toggleClass("参数") 切换样式
jquery对象.toggleClass("类名") - 对被选元素进行添加/删除类的切换操作
兄弟元素
next("参数") 下一个兄弟,并且是li元素
prev("参数") previous 前一个,并且是li标签;
nextAll("参数") 后面所有,并且是li标签
prevAll("参数") 前面所有,并且是li标签
siblings("参数") 所有的兄弟元素,并且是li标签
其他方法
$(this).parent().css("background","red");//parent() 父级元素
$(this).parent().find("li").css("background","red");//先找父级,再找下面的li标签
$(this).parent().find("p").css("background","red");//先找父级,再找下面的p标签
显示和隐藏
show(毫秒值,匿名函数) 显示 hide(毫秒值,匿名函数) 隐藏
两个参数都是可选的,参数1表示完成动作的毫秒值,参数2是一个回调函数,等show或者hide函数执行完以后再执行传入的回调函数
$(function () {
$("#btn1").mouseenter(function () {
$("#div1").show(1000);
}).mouseleave(function () {
$("#div1").hide(1000,function (){
});
});
});
