Jquery初体验一
浏览数：37 /
时间：2015年06月09日
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
//选择器.跟css一样 .css()jq修改样式的方法
$(".hardTool").css("color", "pink");//调用jq的方法,jq内部循环 dom数组,这个叫做隐式迭代
//标签选择器
$("li").click(function () {
alert("我被点击了" + this.innerHTML);
});
$("#ComScreen").css({ "fontSize": "50px", "backgroundColor": "#0094ff", "fontFamily": "微软雅黑" });
})
</script>
</head>
<body>
<ol>
<li class="hardTool">固态硬盘</li>
<li class="hardTool">机械键盘</li>
<li id="ComScreen">视网膜显示屏</li>
<li>水冷机箱</li>
</ol>
</body>
</html>
$由来,自执行函数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//自执行函数,---自动执行,括号外面访问不到,
//用处,不让用户在不经意之间修改
//$符号的由来,jq往window对象里面注册的,$跟jquery对象用处一样
//(function (Name) {
// alert(Name + "你好啊");
//})("金三胖");
// (function () { alert("123"); })();
//一般是写框架的时候用,防止用户重写
//就是将函数用括号括起来
//可以用匿名函数
(function (window) {
window.sayHello = function () { alert("haha"); }
})(window);
say
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
//注意,jq里面几乎都是方法,不需要用等号赋值,调用jq方法,传入实参,即可
//全局变量分割线----------------
var $liSelect = undefined;
var $EditText = $("<input type=‘text‘ />");
//设置失去焦点事件
$EditText.blur(function () {
if ($liSelect != undefined) {
$liSelect.html($(this).val());
}
})
//全局变量分割线----------------
//li标签 高亮选中
//设置为全局的是 为了在新增的时候,能够添加
function highSelect() {
//将其他的li标签颜色还原
$("li").css("color", "black");
//将自己的变色
$(this).css("color", "pink");
//将自己存到全局变量中
$liSelect = $(this);
}
//01.dom树加载完毕 window.onload 页面资源加载完毕
$(function () {
//---为li标签添加高亮选中的方法
$("li").click(highSelect); 1
//02.jq的id选择器--新增按钮
$("#btnAdd").click(function () {
//弹出输入框
var userInput = window.prompt("请输入点心名", "比如叉烧鸡腿双拼");
//判断用户输入是否有效
if (userInput != null && userInput.trim() != "比如叉烧鸡腿双拼" && userInput.trim() != "") {
//有效就创建li标签,--使用jq的创建dom元素方法,返回的是 jq对象
var $liCreate = $("<li>" + userInput + "</li>");
//将创建好的li标签追加到ol里面去
$liCreate.appendTo("#olList");
//简单写法
// $("<li>" + userInput + "</li>").appendTo("#olList");
//为新增的li标签设置点击事件
$liCreate.click(highSelect);
}
})
//03.为插入按钮,增加点击事件
$("#btnInsert").click(function () {
if ($liSelect != undefined) {
//弹出输入框
var userInput = window.prompt("请输入点心名", "比如叉烧鸡腿双拼");
//判断用户输入是否有效
if (userInput != null && userInput.trim() != "比如叉烧鸡腿双拼" && userInput.trim() != "") {
//有效就创建li标签,--使用jq的创建dom元素方法,返回的是 jq对象
var $liCreate = $("<li>" + userInput + "</li>");
//将创建好的li标签插入到指定位置
//insertBefore可以传,jq对象,选择器,dom对象,不能为空
$liCreate.insertBefore($liSelect);
//$liCreate.insertBefore();
//为创建好的li标签设置点击事件
$liCreate.click(highSelect);
}
} else {
alert("哥们,先选中");
}
});
//04.为删除按钮,增加点击事件
$("#btnRemove").click(function () {
//判断 是否选中了li标签
if ($liSelect != undefined) {
//jq里面可以自删
$liSelect.remove();
//将删除的元素置空
$liSelect = undefined;
}
})
//05.为编辑按钮,增加点击事件
//.val()可以设置,或者获取单标签的value字<a href="jquery/">jquery/</a>
$("#btnEdit").click(function () {
////创建文本框
//var $textCreate = $("<input type=‘text‘ value=‘" + $liSelect.html() + "‘ /> ");
////设置文本框的value 为li标签的innerHTML
////html()这个方法有点特殊,穿实参,就是设置,不传,就是获取innerHTML
$EditText.val($liSelect.html());//设置value值
//清空li标签的innerHTML
$liSelect.html("");
//将全局的文本框追加进去
$EditText.appendTo($liSelect);
//让文本框获得焦点//focus()如果传入函数,就是设置获得焦点事件,如果不传,就是让元素获得焦点
$EditText.focus();
//为文本框添加失去焦点事件
//$textCreate.blur(function () {
// //将自己的value值,设置给选中的li标签即可
// $liSelect.html($(this).val());
//})
})
})
</script>
</head>
<body>
<input type="button" value="追加li标签" id="btnAdd" />
<input type="button" value="在指定位置插入li标签" id="btnInsert" />
<input type="button" value="删除选中按钮" id="btnRemove" />
<input type="button" value="修改选中li标签" id="btnEdit" />
<ol id="olList">
<li>茶叶蛋</li>
<li>切糕</li>
<li>芭比香包</li>
<li>吮指原味鸡</li>
<li id="Pao">啤酒</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
//自执行函数,作用不让外界访问,
//dom树生成完毕
$(function () {
//$("#id")//id选择器
//$(".class")//class选择器
//$("li")//标签选择器
//返回给我们的是一个jq对象
//jq对象的组成部分
//1.dom数组 2.jq方法
//jq对象只能使用jq方法(.html().val().click()) 不要$("li").innerHTML
//----jqdom互转
// jq对象[索引] 转换成dom元素 jq对象.get(索引)
//$(dom对象) dom转jq对象 好处,使用jq方法
//--------jq事件
$("li").click(function () { })//为元素设置事件..注意 不要用等号赋值
$("li").click()//如果不传实参,就是调用 点击事件
//jq常见属性
$("input").val("下午天气不错");//注意不要用等号赋值,给实参,是赋值
//不给实参.是取值
$("li").html()//给实参,赋值, 不给实参,是取值 会解析标签
$("li").text();//给实参,赋值, 不给实参,是取值 不会解析标签
//--样式设置
$("li").css("color", "red");//用键值对的方式设置
$("li").css("color");//只传key 是取值
$("li").css({ "color": "pink", "backgroundColor": "red" })//对象的字面量表示法
//创建dom元素
$("<input value=" + 123 + "/>");//直接写html标签
$("<li>小苹果<li>");//双标签,后面半个标签如果不写/就会生成2个
//将dom元素追加到dom树里面去
//$("<input value=" + 123 + "/>").appendTo("选择器","dom对象","jq对象")
//将dom元素从dom树中移除
$("#btn").remove();//直接调用remove方法即可,能够自删
})
</script>
</head>
<body>
</body>
</html>
链式编程
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
//链式编程
//原理是,方法返回了相同的jq对象
//不返回jq对象的方法
//.get() //dom对象
//.html().val().text()不传实参 字符串
//.css("color") .css 方法 只传样式名,返回的是字符串
$("#btnTest").click(function () {
//浏览器在调用的时候 dom.onclick()/this是dom对象
$(this).val("雪人兄弟");
})//单击事件
.dblclick(function () {
$(this).css("fontSize", "80px");
})//双击事件
.mouseenter(function () {
$(this).css("color", "yellow");
})
.mouseleave(function () {
$(this).css("color", "black");
});
})
//---自己写链式编程---------------------
//链式编程的本质就是返回对象
var fox = new Object();
fox.run = function () {
alert("抓小动物");
return this;
}
fox.eat = function () {
alert("吃西瓜");
return this;
}
fox.play = function () {
alert("跟小动物玩耍");
return this;
}
fox.wash = function () {
alert("洗澡澡");
return this;
}
fox.sleep = function () {
alert("zzzzZZZZ");
return this;
}
fox.name = "小狐狸号号";
fox.run().eat().play().wash().sleep().name;
</script>
</head>
<body>
<input type="button" id="btnTest" value="海尔兄弟" />
</body>
</html>
层次选择器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
//后代选择器, 使用空格分隔,后一个选择器,的筛选范围是前面的选择器找到元素的后代节点
//$("#olSongs .bangzi").css("color", "pink");
////子代选择器 用>分隔选择器
$("#olSongs>li").css("border", "2px solid #0094ff");
////next选择器
//$(".bangzi+li").css("backgroundColor", "#0094ff");
//同辈元素
//$("#snow~li").css("fontSize", "40px");
//})
</script>
</head>
<body>
<ol id="olSongs">
<li>月亮之上</li>
<li class="bangzi">江南style</li>
<li>小苹果</li>
<li>
<ol id="olFoods">
<li>哈根达斯</li>
<li id="snow">和路雪</li>
<li class="bangzi">五仁月饼</li>
<li>泡菜</li>
</ol>
</li>
</ol>
<ol id="olPeople">
<li>韩庚</li>
<li class="bangzi">蔡妍</li>
<li>西兰花</li>
</ol>
</body>
</html>
过滤器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ol {
list-style: none;
}
</style>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
alert("稍等一会");
//过滤器 :first获取第一个
//$("li:first").css("backgroundColor", "red");
////:last获取最后一个
//// $("li:last").css("backgroundColor", "blue");
////:eq(索引) 根据索引来获取元素
//$("li:eq(1)").css("backgroundColor", "pink");
////:not(选择器) 不满足括号内的元素
//$("li:not(.noEnd)").css("fontFamily", "楷体");
////----------分割线
////:even过滤器 过滤的是索引
//$("#olCartoonPeople li:even").css("backgroundColor", "green");
//$("#olCartoonPeople li:odd").css("backgroundColor", "orange");
//--范围过滤器
//:gt(索引) 大于
// $("#peopleName li:gt(1)").css("fontSize", "40px");
//:lt(索引) 小于
// $("#peopleName li:lt(2)").css("color", "orange");
//过滤器是以前面过滤出来的元素再次过滤
//如果过滤器复合着写, 后面的过滤器过滤的元素是前面过滤完之后的
// $("#peopleName li:gt(1):lt(1)").css("fontSize", "100px");
//获取范围元素 不推荐将过滤器复合着
//.slice(索引1) 可以取到最小值 ,取不到最大值
//.slice() 大于等于 ,小于
//推荐使用.slice来获取范围元素
$("#peopleName li").slice(1, 3).css("color", "pink");
})
</script>
</head>
<body>
<ol id="peopleName">
<li>0汤姆克鲁斯</li>
<li>1贝克汉姆</li>
<li>2杰克琼斯</li>
<li>3李维斯</li>
<li>4匡威</li>
</ol>
<ol>
<li class="noEnd">海贼王</li>
<li class="noEnd">妖精的尾巴</li>
<li>进击的巨人</li>
<li class="noEnd">名侦探柯南</li>
<li>奥特曼</li>
<li>哈尔的移动城堡</li>
</ol>
<ol id="olCartoonPeople">
<li>0毛利小五郎</li>
<li>1泰罗奥特曼</li>
<li>2徐老师</li>
<li>3懒羊羊</li>
<li>4圣斗士星矢</li>
<li>5龙猫</li>
</ol>
</body>
</html>
父子兄弟元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
//.parent可以获取父节点
//$("#famous").parent().css("border", "10px solid #0094ff");
////获取子节点
//$("#famous").children("input").css("backgroundColor", "red");
////无差别获取后代元素 .find(选择器) 获取后代元素
////select标签 里面的option标签如果没有value属性
////那么select.value() 获取到的 是选中的option标签的innerHTML
////如果有value属性.获取到的 就是选中的option标签的value
//$("#famous").dblclick(function () {//通过点击事件触发
// alert($(this).find("select").val());//获取后代中select标签的value值
//});
alert("稍等一会");
//-----------分割线-----------兄弟元素获取
//.next获取紧挨着的
$("#fatFood").next().css("color", "pink");
//.nextAll.获取之后的所有兄弟节点
$("#fatFood").nextAll().css("backgroundColor", "green");
//获取前面的
//.prev()之前的紧挨着的
//.prevAll()之前所有的兄弟
$("#fatFood").prev().css("backgroundColor", "yellow");
//获取除自己以外的所有兄弟
//.siblings()获取所有兄弟节点(除自己意外)
$("#fatFood").siblings().css("fontSize", "100px");
///------------分割线--------下面是破坏性操作
//破坏性操作,就是改变jq方法的返回对象的操作
//一般是 获取父子,兄弟元素的方法
$("#fatFood").click(function () { }).next()
})
</script>
</head>
<body>
<ol id="olFirst">
<li>鸡腿饭</li>
<li>叉烧饭</li>
<li id="fatFood">猪脚饭</li>
<li>肉卷饭 </li>
<li>小炒牛肉</li>
<li>水煮肉片</li>
</ol>
<ol>
<li>iphone1</li>
<li>iphone2</li>
<li>iphone3gs</li>
<li id="famous">iphone4s<input type="button" value="点击购买翻新4s" />
<div style="border: 1px solid #0094ff">
<select>
<option value="比较旧">9成新</option>
<option value="特别旧">8成新</option>
</select>
</div>
</li>
<li>iphone5s</li>
<li>iphone6</li>
</ol>
</body>
</html>
jquery对象和dom对象
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
//01dom对象.进行增删查改使用的是 dom语法 比如innerHTML,value,onclick,appendChild
// document.getElementById("olList").innerHTML
//02.调用jq的方法时,他返回的是 jq对象,方法都是jq方法,
//所以 千万不要出现 $("li").innerHTML="123";
//如果我们使用的是 jq对象,那么所有方法,都有自动提示,如果没有肯定是你写错了
//jq对象有两大组成部分
//第一大部分,就是dom数组--隐式迭代
//第二大部分,jq方法
//$(function () {
// alert($("li").length);
//})
//$("li").append
//--------------------------------dom,jq对象互转
$(function () {
//通过索引来取--dom元素
$("li")[0].innerHTML = "麻辣烫";
//通过jq对象的get方法
$("li").get(1).innerHTML = "韭菜月饼";
//如何将dom对象转成jq对象
//好处,更加简洁
document.getElementById("TeaEgg").onclick = function () {
$(this).css({
"color": "#0094ff",
"backgroundColor": "yellow",
"fontSize": "100px"
})
}
});
</script>
</head>
<body>
<ol id="olList">
<li id="TeaEgg">茶叶蛋</li>
<li>切糕</li>
<li>芭比香包</li>
<li>吮指原味鸡</li>
<li>啤酒</li>
</ol>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
