웹 프런트엔드 학습 노트--Day9(jQuery)
63131 단어 웹 프런트엔드 학습 노트
<1>jQuery는 미국인 John Resig가 창립하여 지금까지 세계 각지에서 온 수많은 자바스크립트 고수들이 팀에 가입하도록 끌어들였다.
<2>jQuery는prototype에 이어 또 하나의 우수한 자바스크립트 프레임워크입니다.WRITE LESS, DO MORE!
<3> 이것은 경량급 js 라이브러리(압축 후 21k)입니다. 이것은 다른 js 라이브러리에 미치지 못합니다. 이것은 CSS3를 호환하고 각종 브라우저도 호환합니다.
<4>jQuery는 빠르고 간결한javaScript 라이브러리로 사용자가 HTMLdocuments, 이벤트를 더욱 편리하게 처리하고 애니메이션 효과를 실현하며 사이트에 AJAX 상호작용을 편리하게 제공할 수 있습니다.
<5>jQuery의 또 다른 큰 장점은 문서 설명이 완전하고 각종 응용 프로그램도 상세하게 설명하는 동시에 많은 성숙한 플러그인을 선택할 수 있다는 것이다.
2. jQuery 대상은 무엇입니까?
jQuery 대상은 jQuery를 통해 DOM 대상을 포장한 후에 생기는 대상이다.jQuery 객체는 jQuery만의 **.**만약 대상이 jQuery 대상이라면 **, **는 jQuery의 방법을 사용할 수 있습니다: $("#test").html();
$("#test").html()
// ： ID test html 。 html() jQuery
// DOM ： document.getElementById(" test ").innerHTML;
// jQuery DOM ， jQuery DOM ， DOM jQuery .
// ： jQuery , $.
var $variable = jQuery
var variable = DOM
$variable[0]：jquery dom $("#msg").html(); $("#msg")[0].innerHTML
jquery의 기본 문법: $(selector).action()
3. 원소 찾기(선택기와 필터)
3.1 선택기
3.1.1 기본 선택기
$("*") $("#id") $(".class") $("element") $(".class,p,div")
3.1.2 등급 선택기
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3.1.3 기본 필터
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
3.1.4 속성 선택기
$('[id="div1"]') $('["alex="sb"][id]')
3.1.5 폼 선택기
$("[type='text']")----->$(":text")
input : $("input:checked")
：
<html>
<head>
<title> （ ）title>
head>
<body>
<div>hello xjydiv>
<a href=""> a>
<p id="p1" alex="sb">nihaoap>
<p id="p2" alex="sb">nihaoap>
<div class="outer">
outer
<div class="inner">
inner
<p>inner 2p>
div>
<p>wzqp>
div>
<p>xialvp>
<div class="outer2">div1div>
<ul>
<li>111li>
<li>222li>
<li>333li>
<li>444li>
ul>
<input type="text" name="">
<input type="checkbox" name="">
<input type="submit" name="">
body>
<script src="E:/ /1.4web /JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
//
// // $("div").css("color","red");
// $("*").css("color","red");
// $("#p1").css("color","yellow");
// $(".outer").css("background-color","green");
// $(".inner,p,a").css("background-color","blue");
//
//$(".outer p").css("color","red");
// ( ， ， )
//$(".outer>p").css("color","red");
// （ ）
//$(".outer+p").css("color","red");
// （ ）
//$(".outer~p").css("color","red");
// （ ）
//
//$("li")// ， li
//$("li:first").css("color","red");
//
//$("li:last").css("color","red");
//
//$("li:eq(2)").css("color","red");
//eq()， ， 0
//$("li:even").css("color","red");
//
//$("li:odd").css("color","yellow");
//
//$("li:gt(1)").css("color","yellow");
// （ ， ）
//$("li:lt(2)").css("color","yellow");
// （ ， ）
//
//$("[alex='sb'][id='p1']").css("color","blue");
//
//$(":text").css("width","500px")
script>
html>
3.2 필터
3.2.1 필터 필터
$("li").eq(2) $("li").first() $("ul li").hasclass("test")// class test ，
3.2.2 검색 필터(매우 중요)
$("div").children(".test") $("div").find(".test")
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings()
eg： ：
<html>
<head>
<title> title>
head>
<body>
<div>hello xjydiv>
<a href=""> a>
<p id="p1" alex="sb">nihaoap>
<p id="p2" alex="sb">nihaoap>
<div class="outer">
outer
<div class="inner">
inner
<p>inner 2p>
div>
<p>wzqp>
div>
<p>xialvp>
<div class="outer2">div1div>
<ul>
<li>111li>
<li id="end2">222li>
<li>333li>
<li>444li>
<li>555li>
<li>666li>
<li>777li>
<li id="end">888li>
<li>999li>
ul>
<input type="text" name="">
<input type="checkbox" name="">
<input type="submit" name="">
body>
<script src="E:/ /1.4web /JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
//
//$("li").eq(2).css("color","red");
//$("li").first().css("color","yellow");
//$("li").last().css("color","yellow");
//
//$(".outer").children("p").css("color","red");
// （ ）
//$(".outer").find("p").css("color","green");
// p
//$("li").eq(2).next().css("color","green");
// （ ）
//$("li").eq(2).nextAll().css("color","green");
//
//$("li").eq(2).nextUntil("#end").css("color","green");
// id=end ，
//$("li").eq(6).prev().css("color","green");
// 7 （ ）
//$("li").eq(6).prevAll().css("color","green");
// 7
//$("li").eq(6).prevUntil("#end2").css("color","green");
// 7 id=end2 ，
//console.log($(".outer .inner p").parent().html())
//
//$(".outer .inner p").parents().css("color","red")
// （ ）
//$(".outer .inner p").parentsUntil("body").css("color","red")
// body
//$(".outer").siblings().css("color","red")
//
script>
html>
3.3 인스턴스의 왼쪽 메뉴
<html>
<head>
<title> title>
<style type="text/css">
.menu{
height: 500px;
width: 30%;
background-color: gray;
float: left;
}
.content{
width: 70%;
height: 500px;
background-color: red;
float: left;
}
.title{
line-height: 50px;
background-color: green;
color: yellow;
}
.hide{
display: none;
}
style>
head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title"> div>
<div class="con">
<div>111div>
<div>222div>
<div>333div>
div>
div>
<div class="item">
<div class="title"> div>
<div class="con hide">
<div>wwwdiv>
<div>zzzdiv>
<div>qqqdiv>
div>
div>
<div class="item">
<div class="title"> div>
<div class="con hide">
<div>xxxdiv>
<div>jjjdiv>
<div>yyydiv>
div>
div>
div>
<div class="content">div>
div>
body>
<script src="E:/ /1.4web /JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
$(".item .title").click(function(){
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
//$(this).next().removeClass("hide");
//$(this).parent().siblings().children(".con").addClass("hide");
})
script>
html>
3.4 실례의tab 전환
<html>
<head>
<title>tab title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
background-color: gray;
}
.menu{
background-color: #cccccc;
line-height: 40px;
border: 1px solid red;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid yellow;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: 2px solid rebeccapurple;
}
style>
head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this)">
li>
<li xxx="c2" onclick="tab(this)"> li>
<li xxx="c3" onclick="tab(this)"> li>
ul>
<div class="content">
<div id="c1"> div>
<div id="c2" class="hide"> div>
<div id="c3" class="hide"> div>
div>
div>
body>
<script src="E:/ /1.4web /JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
function tab(self){
var index=$(self).attr("xxx");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current")
}
script>
html>
좋은 웹페이지 즐겨찾기
