引入
/*
1.使用jquery需要引用jquery库
2.jquery库大家一定要放最上面
$ is not defined 表示没有引用jquery
3.jquery基于JS
4.jquery所有的方法 都需要使用jquery对象来调用不能使用dom对象调用
*/
function testBox(){
//document.getElementById("box").style.backgroundColor = "red";
//$("#box").css("background-color","red");
//错误一 jquery对象调用js的属性
//var c= $("#box");
//c.style.backgroundColor = "red";
//错误二 dom对象调用jquery的方法
//var c = document.getElementById("box");
//c.css("background-color","red");
}
语法
/*
1.jquery选择器都是字符串
2.jquery操作样式
先使用选择器选到jquery对象
调用对象的css方法
方法的参数通常是一个对象，一个参数，可以同时设置多个属性
如果你只要设置一个属性，有简写使用2个参数 属性,值
3.jquery选择器选择到的如果是多个元素使用样式css方法不需要循环直接使用
*/
/*基本选择器*/
//改变id为one的元素的背景色
//$("#one").css({"background-color":"red"});
//$("#one").css("background-color","red");
//改变class为mini的所有元素的背景色
// var list = document.getElementsByClassName("mini");
// for(var i in list){
// list[i].style.backgroundColor= "red";
// }
//$(".mini").css("background-color","red");
//改变元素名是<div>的所有元素的背景色
//$("div").css("background-color","red");
//改变所有元素的背景色
//$("*").css("background-color","red");
//改变所有<span元素和id为two的元素的背景色>
//$("span,#one").css("background-color","red");
/*层级选择器*/
//改变<body>内所有<div>的背景色 (重点)
//$("body div").css("background-color","red");
//改变<body>内<div>子元素的背景色
//$("body>div").css("background-color","red");
//改变class为one的下一个同辈元素的背景色
//$(".one+div").css("background-color","red");
//$("[title=other]+div").css("background-color","red");
//在jquery中又更加好的办法来代替
//可以使用筛选和过滤来实现上面的功能
//改变id为two元素后面的所有的<div>同辈元素的背景色
//$("#two ~ div").css("background-color","red");
//在jquery中又更加好的办法来代替
//这边扩展一个方法，上面的next和nextAll都只能选择元素之后的同辈元素，如果需要选择不只后面的所有的同辈元素的话要使用.siblings();
/*过滤选择器*/
//改变第一个<div>元素的背景色
//$("div:first").css("background-color","red");
//改变最后一个<div>元素的背景色
//$("div:last").css("background-color","red");
//改变class不为one的<div>元素的背景色
//$("div:not(.one)").css("background-color","red");
//改变索引值为偶数的<div>元素的背景色 注意下标是从0开始的
//$("div:even").css("background-color","red");
//改变索引值为奇数的<div>元素的背景色
//$("div:odd").css("background-color","red");
//改变索引值为3的<div>元素的背景色
//$("div:eq(9)").css("background-color","red");
//改变索引值大于3的<div>元素的背景色
//$("div:gt(9)").css("background-color","red");
//改变索引值小于3的<div>元素的背景色
//$("div:lt(9)").css("background-color","red");
//改变所有标题元素，例如<h1> <h2>..这些元素的背景色，这个是一个基本的过滤选择器
//改变当前正在执行动画的元素的背景色
/*内容过滤选择器*/
//改变含有文本"di"的<div>元素的背景色
//改变不包含子元素（包括文本元素）的<div>空元素的背景色
//改变含有class为mini元素的<div>元素的背景色
//改变含有子元素（包括文本元素）的<div>元素的背景色
/*可见性过滤器选择器实例*/
//改变所有可见的<div>元素的背景色
//显示隐藏的<div>元素
/*属性过滤选择器*/
//改变含有属性title的<div>元素的背景色
//$("[title]").css("background-color","red");
//改变属性title值等于“test的<div>元素的背景色”
//$("[title='test']").css("background-color","red");
//改变属性title值等于“test”的div元素的背景色
//$("div[title='test']").css("background-color","red");
//改变属性title值以“te”开始的div元素的背景色
//$("div[title^='ot']").css("background-color","red");
//改变属性title值以“est”结束的div元素的背景色
//$("div[title$='r']").css("background-color","red");
//改变属性title值含有“es”的div元素的背景色
//$("[title*='th']").css("background-color","red");
//改变属性title值 有属性id 并且 有属性title含有es 的div元素的背景色
//$("[title][id][title*='es']").css("background-color","red");
//不推荐
//$("[title!='test']").css("background-color","red");
/*子元素过滤选择器*/
//改变每个class为one的div父元素下的第2个子元素的背景色
//改变每个class为one的div父元素下的最后一个子元素的背景色
//如果class为one的div父元素下只有一个子元素，那么则改变这个子元素的背景色
/*
标签中的内容 html() == innerHTML
1.增加替换标签中的内容 参数是字符串
2.获取标签中的内容 没有参数
3.特殊用途 清空标签 html("")
标签中的文本 text() == innerTEXT
同html()只是他只操作文本不操作标签
追加内容
在元素的内部操作
append prepend
1.append在标签中追加在最后
2.prepend在标签中追加在最前面
在元素的外部操作
after before
1.after在标签后面增加元素
2.before在标签前面增加元素
对标签自身的操作
删除
1.remove() 标签也会被删除
2.detach() 保留事件
3.empty() 清空标签 == html("")
*/
function addHtml(){
//var l = $("#box").text();
//var html = "<a href='#'>搜狐</a>";
//$("#box").append(html);
//$("#box").after(html);
$("a").empty();
}
/*
属性增加,修改和获取
1.attr方法 (两用方法) 增加属性 获取属性
2.增加属性 参数是一个对象,单个属性可以简写 成2个参数的格式
3.获取属性 参数一个字符串,指定你要获取哪个属性
4.属性在页面上一般用于存储数据的
隐藏域存储
属性存储 一般称作数据绑定 vue
2.prop方法,同attr
3.优先使用attr 当你发现attr失效就使用prop
属性的删除
1.removeAttr removeProp
2.参数字符串指定需要删除的属性
属性样式的操作
1.addClass增加样式类
2.removeClass 删除样式类
*/
function addAttr(){
//$("#box").attr("flag",10);
//$("#box").attr({"flag":10,"sum":"分数"});
//var flag = $("#box").attr("uid");
//alert(flag);
//$("#box").removeAttr("uid");
//$("div").addClass("lei");
//$("div").addClass("lei1");
//var flag = $("#box").attr("class","lei1");
$("div").removeClass("lei");
}
/*
页面加载完成事件
1.$(document).ready();
2.jquery的页面加载完成事件可以写多个
3.简写 $(function(){});
其他事件绑定
1.事件如果要立刻生效 需要将绑定代码写在页面加载完成事件中
2.绑定事件两种方式
专用方法绑定
a.先通过选择器获取jquery对象
b.调用事件专用方法 (不带on)
c.事件体写在参数
通用方法绑定
a.先通过选择器获取jquery对象
b.bind("事件名称",事件function)
c.参数1 事件的名称 参数2 事件的函数体
3.hover效果 jquery有专门方法 hover(fun1,fun2)
4.toggle(...) 点击切换
5.移除.解绑事件 unbind("事件名称")
6.模拟用户操作 trigger()
a.先要通过选择器选择需要触发事件的元素
b.trigger() 参数指定你需要触发的动作
jquery具有连续性 可以一直.下去
*/
$(document).ready(function(){
console.log("页面加载完成了");
});
$(function(){
// $("#box").click(function(){
// alert(123);
// });
$("#box").bind("click",function(){
alert(123);
});
// $("#box").mouseover(function(){
// //标志他为jquery对象
// $(this).css("background-color","blue");
// }).mouseout(function(){
// $(this).css("background-color","red");
// }).attr("flag",10);
// $("#box").hover(function(){
// $(this).css("background-color","blue");
// },function(){
// $(this).css("background-color","red");
// });
// $("#box").toggle(function(){
// $(this).css("background-color","blue");
// },function(){
// $(this).css("background-color","green");
// },function(){
// $(this).css("background-color","red");
// });
$("#btn").click(function(){
$("#box").unbind("click");
});
$("#btn1").click(function(){
//浏览器帮我们执行了 box的点击事件
$("#box").trigger("click");
});
});
// window.onload = function(){
// document.getElementById("box").οnclick= function(){
// alert("点击了我");
// };
// };