jquery
2019-06-18 本文已影响0人
关耳木南
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<style type="text/css">
div{
width:100px;
height:100px;
background: red;
}
p{
height:50px;
background-color: pink;
}
.p1{
height:50px;
background-color: yellow;
}
</style>
<body>
<div>
<p></p>
</div>
<p class="p1"></p>
<script type="text/javascript">
/*
eq(下标) 筛选出来的对象是jq对象
first() 取集合第一个
last()
hasClass()
filter(规则) 根据规则筛选，返回符合条件的所有新对象的新集合
has() 判断是否具有某些子元素，如果有 返回这个有子元素的父元素
not(条件) 满足条件的不要
**children() 找儿子，找集合里所有对象的所有孩子
**find() 找后代，必须传递参数，返回符合条件的后代。
**next() 下一个弟弟元素
**prev() 返回上一个哥哥元素
nextAll() 返回所有的弟弟元素
prevAll() 所有的哥哥元素
**offsetParent() 返回定位父节点(就近原则)
**parents(条件) 找到符合条件的父元素
**siblings() 获取所有的兄弟元素
*
* 事件
* ready
* window.onload 监听页面所有的资源加载（html、css、img）完成后执行
* （DOMContentLoaded:当初始的HTML文档被完全加载和解析完成之后执行）
* $(document).ready(function(){
* //在页面的dom节点准备好后执行
* })
* $(document).ready(function(){ $(function(){
* //执行代码 ==》简写 //执行代码
* }) })
* on
* $(元素).on("事件"，function(){})
*
* $(function(){
* $("div").on("click",()=>{
* console.log(1)
* });
* $("div").on("mouseenter",()=>{
* console.log("enter")
* });
* $("div").off()//off()不传参,就是把前面元素内的所有事件解绑
* $("div").off("click")//只解绑前面元素的click事件，mouseenter事件还在
* })
* off
*
* jq中的事件代理
* html中 <div><p></p></div>
*
* $(function(){
* var efn = function(){
* console.log("p")
* }
* $(document).on("click","p",efn) //点击在p标签上执行
* })
* one
* 事件执行一次
* trigger
*
*/
$(function(e){
var efn = function(e){
// console.log("p");
//a: console.log(e.data)//获取{a:1}
//b: console.log(1)
console.log(e.data)
}
var obj = {a:1};
//$(document).on("click","p",efn) //点击在p标签上执行
//a: $(document).on("click","p",{a:1},efn);
$(document).on("click",obj,efn);
//b: $(document).trigger("click");
$(document).trigger("click",obj);
})
// $(".p1").one("click",()=>{
// $(".p1").html("one()只执行一次")
// })
$(document).hover(
function(){
//移入时触发，只有一个函数时也是移入时触发
},
function(){
//移出时触发
})
</script>
</body>
</html>
