<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery入口函数</title>
<!--1. 使用CDN网络地址-->
<!-- <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>--> <script src='js/jquery/jquery.min.js'></script>
<script type='text/javascript'>
/* jquery相关入口函数 */
$(document).ready(function(){
alert('jquery的入口函数')
})
$(function(){
console.log('jquery的入口函数简写版')
})
$(function(){
/* 根据id找 html包含全部内容 text只是文本内容 */
console.log($('#t').html())
console.log($('#t').text())
/* 根据标签找相关数据长度 */
var fruit=$('li')
for(var j=0;j<=fruit.length;j++){
console.log(fruit[j])
}
console.log($('li').length)
/* 根据类名找相关数据的长度 */
var all=$('.fruit')
for(var i=0;i<=all.length;i++){
console.log(all[i])
}
console.log($('.fruit').length)
})
/* js和jquery之间的相互转化 */
$(function(){
/* javascript格式---->jquery格式的转化 */
console.log(document.getElementById("t").innerHTML)
var t1=document.getElementById("t")
console.log($(t1))
console.log($(t1).html())
console.log($(t1).text())
/* jquery格式----javascript格式之间进行转化 */
console.log($('#t')[0].innerHTML)
console.log($('#t').get(0).innerHTML)
console.log($('.fruit')[2].innerText)
})
/* 层级选择器 */
$(function(){
/* 空格表示包含的所有 */
console.log($('.div1 h1').length)
//> 表示下级
console.log($('.div1 > h1').length)
for (var i=0;i<=$('.div1 > h1').length;i++){
console.log($('.div1 > h1')[i])
}
// aaa相邻的下一个
console.log($('.aa + h1').html)
// aaa的所有兄弟
console.log($('.aa ~ h1').length);
})
</script>
</head>
<body>
<!-- 层级选择器 树状结构 父级 子级 兄弟级 -->
<div class='div1'>
<h1 class='aa'>aaaaaaaa</h1>
<h1>bbbbbbbb</h1>
<div class='div2'>
<h1>11111111</h1>
<h1>22222222</h1>
<h1>33333333</h1>
</div>
<h1>cccccccc</h1>
</div>
<h1 id='t'><i>标题</i></h1>
<ul>
<li class='fruit'>苹果</li>
<li class='fruit'>香蕉</li>
<li class='fruit'>橘子</li>
<li class='fruit'>梨子</li>
<li class='fruit'>葡萄</li>
</ul>
</body>
</html>
网友评论