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 ...
随机推荐
- Java基础教程：多线程杂谈——Volatile
Java基础教程:多线程杂谈——Volatile 引入Volatile Java语言提供了一种稍弱的同步机制,即Volatile变量,用来确保将变量的更新操作通知到其他线程.当把变量声明为Volati ...
- [计算机视觉][ARM-Linux开发]OpenCV 3.1下载 ippicv_linux_20151201失败
安装OpenCV 3.1的过程中要下载ippicv_linux_20151201,由于网络的原因,这个文件经常会下载失败. 解决的办法是手动下载: 先下载 OpenCV 3.1 Download MD ...
- QueryList::Query() The received content is empty!的经准灵活解决办法
QueryList::Query() The received content is empty! 最近因为项目问题出现The received content is empty!,我也有过在网上寻找 ...
- Python中创建数值列表——参考Python编程从入门到实践
1. 函数range( )的使用 range( )函数可以生成一系列的数字: for value in range(1, 5): print(value) Note:运行结果是打印数字1到4,即该函数 ...
- 【字符串hash】DNA
DNA 题目描述 小X身为奆老,兴趣爱好广泛,他还非常喜欢研究DNA序列……小X进行了一项关于DNA序列研究,发现人某条染色体上的一段DNA序列中连续的k个碱基组成的碱基序列与做题的AC率有关!于是他 ...
- C#7 进入快速迭代道路
out变量 有一定C#编程经历的园友一定没少写如下这样的代码: int speed; if (int.TryParse(speedStr, out speed)) speed*=; 注释:int.Tr ...
- 使用postman mock server
需要写一个小的Java程序,用来调用云平台的接口 由于云平台的接口程序还没有写好,只能用模拟的方式先行开发代码, 用了post来模拟接口程序. 需要模拟的接口如下: ■请求地址 /openapi/ip ...
- Java开发Hbase示例
Java开发Hbase示例 使用Hbase操作数据 package com.sunteng.clickidc.test; import java.io.IOException; import java ...
- cf 869c The Intriguing Obsession
题意:有三种三色的岛,用a,b,c来标识这三种岛.然后规定,同种颜色的岛不能相连,而且同种颜色的岛不能和同一个其他颜色的岛相连.问有多少种建桥的方法. 题解:em....dp.我们先看两个岛之间怎么个 ...
- Vue+VSCode开发环境搭建
时间2019.9月 1. 安装 nodeJS; 安装VScode 安装好nodeJS之后,默认会安装好npm 测试 nodeJS 和npm是否可以执行 node -v npm -v 1.1 VScod ...