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 ...
随机推荐
- SpringBoot学习笔记：动态数据源切换
SpringBoot学习笔记:动态数据源切换 数据源 Java的javax.sql.DataSource接口提供了一种处理数据库连接的标准方法.通常,DataSource使用URL和一些凭据来建立数据 ...
- DES 指定键的大小对于此算法无效
KEY (byte[]) 长度不为8. 一般KEY使用UTF8编码. byte[] byKey = Encoding.UTF8.GetBytes(key); 加密内容的编码,由两方协商. Sys ...
- 安装Windows和Ubuntu双系统2
安装Windows和Ubuntu双系统 0.552016.12.10 15:54:41字数 2101阅读 6644 这几天开始动手做毕设啦,打算好好过把Linux瘾,接下来便是这两天我在联想电脑上安装 ...
- dotnet core use RabbitMQ
安装RabbitMQ 自从使用了Docker之后,发现Docker真的是比虚拟机好用啊, 因此我这里在Docker里面创建一个RabbitMQ容器. 这里注意获取镜像的时候要获取management版 ...
- PHP正则匹配价格
/** * 匹配价格 * @param $price * @return bool */ public static function checkPrice($price) { // 不能小于0 if ...
- 微信开发核心AccessToken实现
Common <?php namespace Proxy\Action; use Think\Action; use Vendor\Func\Red; class CommonAction ex ...
- 用php做管理后台
最近因处理家庭之事,技术上没有提高,这段时间也陆续的恢复了正常的开发,由于要做一个管理后台,所以在选择语言和架构上搜了不少资料, php 和java 的选择上,后来选择用php作为管理后台开发的语言. ...
- Linux基础-14-ssh服务、apache服务
1. ssh服务 ssh服务是一个守护进程(demon),系统后台监听客户端的连接,ssh服务端的进程名为sshd,负责实时监听客户端的请求(IP 22端口),包括公共秘钥等交换等信息. ssh服务端 ...
- 从其他数据库迁移到MySQL及MySQL特点
从其他数据库迁移到MySQL Oracle,SQL Server迁移到MySQL 一些变化 不再使用存储过程.视图.定时作业 表结构变更,如采用自增id做主键,以及其他语法变更 业务SQL改造,不使用 ...
- webpack css文件编译、自动添加前缀、剥离
1.css文件编译 webpack默认只能编译js文件,引入css需要loader支持 // css文件写入js中 npm i style-loader -D // css文件loader npm i ...