Jquery初体验一
<!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>
Jquery初体验一的更多相关文章
- JQuery初体验
虽然做b/s也有一年半了,但是还没怎么认真的去看JQuery,趁自己生病的这几天,恶补一下JQuery方面的知识,保持学习的态度,内容很简单,聊以自慰一下>_<.废话不多说,直接上代码了. ...
- 【原创】Jquery初体验二
快速导航 一.传统方式生成Table 二.使用jquery.tmpl插件快速生成Table 三.Jquery中的操作class的几个方法 四:jq里面的克隆 五:属性过滤器 六:表单元素过滤器 一.传 ...
- jQuery---jQuery初体验
jQuery初体验 1. 引入jquery文件 2. 入口函数标准 jQuery优点总结 (对应的就是js的缺点): 查找元素的方法多种多样,非常灵活 拥有隐式迭代特性,因此不需要手写for循环 完全 ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- day12—jQuery ui引入及初体验
转行学开发,代码100天——2018-03-28 按照所下载教学视频,今天已进行到jQuery UI的学习中.注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过.其他时间中,仍需继续针对 ...
- python--爬虫入门（七）urllib库初体验以及中文编码问题的探讨
python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...
- SignalR初体验
简介 ASP .NET SignalR[1] 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以 ...
- node.js 初体验
node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...
- grunt 构建工具(build tool)初体验
操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/ 直接点击install ,会根据你的操 ...
随机推荐
- python advanced programming ( II )
面向对象编程 简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数.数据封装.继承和多态是面向对象的三大特点. 在Python中,所有数据类型都可以视为对 ...
- python基础回顾
1.第二个缺点就是代码不能加密.如果要发布你的Python程序,实际上就是发布源代码,这一点跟C语言不同,C语言不用发布源代码,只需要把编译后的机器码(也就是你在Windows 上常见的xxx.exe ...
- java中的中文字符转码技术
package com.yin.test; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; impor ...
- presto调研和json解析函数的使用
presto简单介绍 presto是一个分布式的sql交互式查询引擎.可以达到hive查询效率的5到10倍.支持多种数据源的秒级查询. presto是基于内存查询的,这也是它为什么查询快的原因.除了基 ...
- RPC、RMI、SOAP、WSDL的区别详解
RPC与RMI的区别============================================================================RPC:(Remote Pr ...
- unigui在阿里云服务器上部署
unigui在阿里云服务器上部署 客户租用了阿里云WINDOWS2008服务器,部署UNIGUI发现死活不行,WINDOWS2008自带的IE9浏览器打开URL,卡死在loading...... 我远 ...
- Winform 自定义窗体皮肤组件
分享一个很久之前写的一个Winform换肤组件. 主要利用CBT钩子,NativeWindow来实现.可实现动态换皮肤插件修改窗体显示外观. 我们先定义一个自定义组件 using Skin; usin ...
- 【计算机网络】数据交换技术和多路复用技术的正（nao）确(can)打开方式
交换的作用 数据交换是计算机网络中两个终端进行数据传输的方式,它又可以分成两种类型:电路交换和分组交换.很显然,问题的核心在于“交换”,那么我们首先要思考的是:交换的作用是什么? “交换”的作 ...
- ssh连接卡在【To escape to local shell, press 'Ctrl+Alt+]'.】的解决方法
一.现象 1.使用xshell连接远程主机的时候一直卡在To escape to local shell, press 'Ctrl+Alt+]'.,要等很久才能连上: Connecting to 19 ...
- python-i春秋验证码识别
i春秋作家:hlpureboy python+机器学习+验证码识别+源码 简单介绍 最近在写某网站的自动注册,在注册的过程中遇到一些问题,如js的执行.验证码的识别等等,今天给大家如何用python通 ...