jquery基础知识2
1.js和jquery对象的转换
js==>jquery对象 $(js对象)
jquery==>js jq对象[index] jq对象.get(index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="item">qing</li>
<li>qingqing</li>
<li>qingqingqing
</ul>
<script src="jquery.js"></script>
<script>
//js innerText innerHTML value
//标签属性的操作 .src .href .id .claaName
//样式 .style.属性
//DOM操作 var datas = ["red","green","yellow"]
//1.jquery对象转化成js对象（js包含jquery）
// console.log($("li")[0]);
var item = document.getElementsByClassName("item")[0];
//让js对象转换成jquery对象
// console.log($(item));
console.log($(item).css("color","red").click(function(){
alert(1111);
}))
//链式编程
$(item).css("color","red").click(function(){
alert(111);
})
for(var i = 0;i < datas.length;i++){
$("li")[i].style.backgroundColor = datas[i];
}
</script>
</body>
</html>
2.选择器：选中标签对应的jq对象
jq高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<p id="a">qing</p>
<p>q</p>
<p>ing</p>
</div>
<p>zhang</p>
<script src="jquery.js"></script>
<script>
$(function () {
// $(".box>p").css("color","green");
//挨着的下一个兄弟元素
console.log($("#a+p"));
})
</script>
</body>
</html>
基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
var i = 2;
$(`ul li:eq(${i})`).css("color","red");
$("ul li:first").css("color","red");
$("ul li:last").css("color","red");
})
</script>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type="text"]{
border: none;
outline: none;
width: 200px;
height: 100px;
font-size: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<form action="#">
<input type="text" name="user" aaa="bbb">
<input type="password" name="pwd">
<input type="submit" >
</form>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
console.log($("input[type=text]"));
})
</script>
</body>
</html>
筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div class="father">
<p>qing</p>
<a href="#">asd</a>
<span>qwe</span>
<div class="g">
<span>91</span>
</div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
// console.log($(".father").find(".g"));
$(".g").click(function () {
//js对象
// console.log(this);
// $(this).css("color","red");
});
//find()方法会找到后代无论是子代还是子孙
// console.log($(".father").find("span"));
//谁触发了点击事件this就是谁
// $(".father").find(".g>span").click(function () {
// console.log(this)
// })
//只找子代
console.log($(".father").children("span"));
//parent()获取的是亲爹
console.log($(".g span").parent());
})
</script>
</body>
</html>
3.siblings方法（排他思想）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
//点元素 变红色
$("ul li").click(function () {
$(this).css("color","red").siblings("li").css("color","black");
})
})
</script>
</body>
</html>
4.选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style:none;
}
a{
text-decoration: none;
}
.box{
width: 400px;
height: 300px; }
.box ul {
width: 100%;
overflow: hidden;
}
.box ul li{
float: left;
width: 50px;
height: 70px;
margin: 0 10px;
background-color: red;
text-align: center;
line-height: 70px;
}
a{
color: #fff;
}
.active{
width: 100%;
height: 100px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul> </ul>
<div class="active"> </div>
<form action="#">
<input type="text" value="123">
</form>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
console.log($("input[type=text]").val("111"));
//初始化操作
$(".box ul").html(`<li>
<a href="javascript:void(0);">张三</a>
</li>
<li>
<a href="javascript:void(0);">李四</a>
</li>
<li>
<a href="javascript:void(0);">王五</a>
</li>
<li>
<a href="javascript:void(0);">赵六</a>
</li>`);
//点击a标签的时候执行的操作
$(".box ul li a").click(function () {
$(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff");
var textVal = $(this).text();
var newVal = `<h1>${textVal}</h1>`;
$(".active").show().html(newVal);
})
})
</script>
</body>
</html>
5.动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">动画</button>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
$("#btn").click(function () {
// $(".box").hide();
//toggle自己判断显隐状态
$(".box").stop().toggle(1000);
})
})
</script>
</body>
</html>
6.自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<button>动画</button>
<div></div>
<script src="jquery.js"></script>
<script>
$(function () { // $('div').animate(
// {
// param1: value1,
// param2: value2
// },
// speed,
// function() {
// /* stuff to do after animation is complete */
// });
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
}; //自定义动画
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("动画执行完毕！");
});
}); })
})
</script>
</body>
</html>
7.html的标签属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tt{
color: red;
}
.active{
color: green;
}
</style>
</head>
<body>
<div class="box"> </div>
<script src="jquery.js"></script>
<script>
$(function () {
//初始化操作
// $(".box").html("<a href='http://www.baidu.com'>百度一下</a>");
$(".box").html("<a id='anchor'></a>");
$("#anchor").attr("href","http://www.baidu.com").text("百度一下");
console.log($("#anchor").attr("id"));
$("#anchor").attr({
title:"123",
class:"tt"
});
$("body").click(function () {
// $("#anchor").attr("class","active");
$("#anchor").addClass("active");
//移除多个类名
$("#anchor").removeClass("active tt");
$("#anchor").removeAttr("title href");
}) })
</script>
</body>
</html>
8.prop标签对象属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
男<input type="radio" name="sex" checked>
女<input type="radio" name="sex">
<script src="jquery.js"></script>
<script>
$(function () {
// console.log($("input[type=radio]").eq(0).attr("checked"));
console.dir($("input[type=radio]").eq(1).prop("checked"));
$("input[type=radio]").eq(1).prop("abc","123");
console.log($("input[type=radio]").eq(1));
})
</script>
</body>
</html>
9.控制元素显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<button>隐藏</button>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
// var isShow = true;
// $("button").click(function () {
// if (isShow){
// $(".box").addClass("hidden");
// isShow = false;
// } else{
// $(".box").removeClass("hidden");
// isShow = true;
// }
// }) $("button").click(function () {
$(".box").toggleClass("hidden");
})
})
</script>
</body>
</html>
10.选项卡的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.box{
width: 400px;
height: 300px;
}
.box ul{
width: 100%;
overflow: hidden;
}
.box ul li{
float: left;
width: 50px;
height: 70px;
margin: 0 10px;
background-color: red;
text-align: center;
line-height: 70px;
}
a{
color: #fff;
}
.active{
width: 100%;
height: 100px;
background-color: green;
display: none;
}
.show{
display: block; }
</style>
</head>
<body>
<button class="next">下一张</button>
<div class="box">
<ul>
<li>
<a href="javascript:void(0);">张三</a>
</li>
<li>
<a href="javascript:void(0);">李四</a>
</li>
<li>
<a href="javascript:void(0);">王五</a>
</li>
<li>
<a href="javascript:void(0);">赵六</a>
</li>
</ul>
<div class="active"></div>
<div class="active"></div>
<div class="active"></div>
<div class="active"></div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
var count = 0;
$(".next").click(function () {
console.log(1)
count++;
$('ul li').eq(count).css('backgroundColor','green').siblings('li').css('backgroundColor','red');
$("div.active").eq(count).addClass("show").html("abc").siblings("div.active").removeClass("show");
})
$(".box ul li a").click(function () {
$(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff");
//index()方法获取索引
console.log($(this).parent().index()); })
})
</script>
</body>
</html>
jquery基础知识2的更多相关文章
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- JQuery基础知识（1）
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
- JQuery基础知识（2）
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
- jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...
- jQuery基础知识准备
一． 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...
- Jquery基础知识；
1.jquery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(select ...
随机推荐
- Beginning Linux Programming 学习--chapter 17 Programming KDE using QT
KDE: KDE,K桌面环境(K Desktop Environment)的缩写.一种著名的运行于 Linux.Unix 以及FreeBSD 等操作系统上的自由图形桌面环境,整个系统采用的都是 Tro ...
- 服务注册与发现—Eureka
一:Eureka简介 Eureka的意思是(因找到某物,尤指问题的答案而高兴) 我发现了,我找到了,作为一个服务注册和发现中心的名字确实很贴切啊. Eureka包含两个组件,Eureka Server ...
- CSS中的position和float
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
- 100天搞定机器学习|day54 聚类系列：层次聚类原理及案例
几张GIF理解K-均值聚类原理 k均值聚类数学推导与python实现 前文说了k均值聚类,他是基于中心的聚类方法,通过迭代将样本分到k个类中,使每个样本与其所属类的中心或均值最近. 今天我们看一下无监 ...
- 【Linux】一步一步学Linux——Linux版本(03)
目录 00. 目录 01. Linux内核版本 02. Linux内核官方网站 03. Linux发行版本 04. Linux发行版本介绍 4.1 Ubuntu 4.2 RedHat 4.3 Debi ...
- PB笔记之日期函数
https://wenku.baidu.com/view/a0d5f16fb84ae45c3b358cc7.html this.object.yjzzrq[row]= RelativeDate(dat ...
- JAVA堆，栈的区别，用AarrayList、LinkedList自定义栈
大家都知道java模拟机在运行时要开辟空间所以它有特定的五个内存划分: 1.寄存器: 2.本地方法区: 3.方法区: 4.栈内存: 5.堆内存: 但是我们今天来注重讲一下栈和堆 ...
- Python中的单例模式的几种实现方式和优化以及pyc文件解释（转）
原文:https://www.cnblogs.com/huchong/p/8244279.html 另一篇关于.pyc文件是什么? 原文: http://blog.sina.com.cn//s/bl ...
- sqlserver 转化函数
--查询系统当前时间select GETDATE() as date;------------------------- 0-14 ------------------select CONVERT(V ...
- SQL链接服务器查询-OPENQUERY的使用
OpenQuery: 用途:与其他Server交互的技术,通过它能够直接访问其他数据库资源.可以跨平台连接,包括Oracle --创建链接服务器 exec sp_addlinkedserver ' ...