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 ...
随机推荐
- SpringCloud学习笔记：服务支撑组件
SpringCloud学习笔记:服务支撑组件 服务支撑组件 在微服务的演进过程中,为了最大化利用微服务的优势,保障系统的高可用性,需要通过一些服务支撑组件来协助服务间有效的协作.各个服务支撑组件的原理 ...
- 批处理快速合并多分Excel文件并将指定列的数据去重复
1.批处理快速合并多个excel文件方法: 新建一个.txt文本文件,就命名为合并.txt吧. 而后开启文件,复制以下代码到文件中: @echo off E: cd xls dir copy *.cs ...
- Asp.Net Core中创建多DbContext并迁移到数据库
在我们的项目中我们有时候需要在我们的项目中创建DbContext,而且这些DbContext之间有明显的界限,比如系统中两个DbContext一个是和整个数据库的权限相关的内容而另外一个DbConte ...
- 用Gson实现json与对象、list集合之间的相互转化
先写一个Person实体类,导入Gson包 String jsonData="{\"userid\":\"1881140130\"}";// ...
- csdn博客整理
@TOC 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown ...
- AVR单片机教程——烧写hex文件
每一次build项目,编译器都会生成多个文件,其中有一个就是hex文件.之前在IDE中配置的external tools,就是把这个hex文件烧写到单片机中去的. 然而,有些时候你想运行别人的程序,但 ...
- 『Python基础』第7节：基本运算符
一. 基本运算符 运算按种类可以分为: 算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算. 今天我们只学习算数运算.比较运算.逻辑运算.赋值运算.成员运算 1.1 算数运算 以下假设 ...
- Java连接Jira，创建、修改、删除工单信息
还不了解Jira是什么的同学可以看一下这篇文章:https://www.cnblogs.com/wgblog-code/p/11750767.html 本篇文章主要介绍如何使用Java操作Jira,包 ...
- Mongodb命令行导入导出数据
第一步,找到mongodb安装目录第二步,从命令行进入mongodb安装目录下的bin目录第三步(1),导出数据命令(导出的文件有两种格式:json/csv,此处导出的是json文件,对于导出CSV文 ...
- K380键盘IOS使用