[学习笔记]什么是JQuery?
2016-04-16 13:21
567 查看
一、什么是JQuery?
Jquery是javascript库,极大的简化了javascript编程,核心理念是write less,do more(写得更少,做得更多)。它提供API让开发者编写插件,制作动画、事件处理、使用AJAX等,让开发者轻松的开发出功能强大的静态或动态网页。
二、JQuery语法
JQuery语法是为HTMl元素的选取编制的,可以对元素执行某些操作:
基础语法:$(selector).action();
1.美元符号定义JQuery
2.选择符(selector)“查询”和“查找”html元素
3.action()执行对元素的操作
三、JQuery HTML
JQuery拥有可操作html元素和属性的强大方法
1.获取或设置内容
a.text()设置或返回所选元素的文本内容
b.html() - 设置或返回所选元素的内容(包括 HTML 标记)
c.val() - 设置或返回表单字段的值
实例1:
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("#btn1").click(function(){
alert("Text: " + $("#test").text());//获取text文本内容
alert("HTML: " + $("#test").html());//获取html元素内容
alert("Value: " + $("#test").val());//获取表单字段值
});
实例2:
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("#btn1").click(function(){ //id为btn1的元素执行click时间
$("#test1").text("Hello world!"); //设置text值
$("#test2").html("<b>Hello world!</b>"); //设置元素内容
$("#test3").val("Dolly Duck");//设置表单字段值
});
2.设置或返回元素的样式
实例1:返回指定元素的css值
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("p").css("background-color");//获取背景颜色
实例2:设置指定css属性
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("p").css("background-color","yellow") //设置背景色为黄色
实例3:设置多个css属性
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("p").css({"background-color":"yellow","font-size":"200%"});
四、JQuery常用事件
1.click()执行点击事件
2.$(document).ready(function{})定义页面装在完成时,需要执行的方法
Jquery是javascript库,极大的简化了javascript编程,核心理念是write less,do more(写得更少,做得更多)。它提供API让开发者编写插件,制作动画、事件处理、使用AJAX等,让开发者轻松的开发出功能强大的静态或动态网页。
二、JQuery语法
JQuery语法是为HTMl元素的选取编制的,可以对元素执行某些操作:
基础语法:$(selector).action();
1.美元符号定义JQuery
2.选择符(selector)“查询”和“查找”html元素
3.action()执行对元素的操作
三、JQuery HTML
JQuery拥有可操作html元素和属性的强大方法
1.获取或设置内容
a.text()设置或返回所选元素的文本内容
b.html() - 设置或返回所选元素的内容(包括 HTML 标记)
c.val() - 设置或返回表单字段的值
实例1:
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("#btn1").click(function(){
alert("Text: " + $("#test").text());//获取text文本内容
alert("HTML: " + $("#test").html());//获取html元素内容
alert("Value: " + $("#test").val());//获取表单字段值
});
实例2:
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("#btn1").click(function(){ //id为btn1的元素执行click时间
$("#test1").text("Hello world!"); //设置text值
$("#test2").html("<b>Hello world!</b>"); //设置元素内容
$("#test3").val("Dolly Duck");//设置表单字段值
});
2.设置或返回元素的样式
实例1:返回指定元素的css值
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("p").css("background-color");//获取背景颜色
实例2:设置指定css属性
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("p").css("background-color","yellow") //设置背景色为黄色
实例3:设置多个css属性
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("p").css({"background-color":"yellow","font-size":"200%"});
四、JQuery常用事件
1.click()执行点击事件
2.$(document).ready(function{})定义页面装在完成时,需要执行的方法
相关文章推荐
- [学习笔记]利用Jquery实现一些动态效果
- JQuery 遍历对象(DOM,数组,JSON)方法
- jquery实现轮询
- 用jQuery写的简单两级树形菜单
- jQuery实现的倒计时效果实例小结
- jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
- jQuery实现无限往下滚动效果代码
- jQuery遍历json的方法分析
- jQuery 获取元素并添加
- knockoutjs+jquery.gridgroup 实现table数据加载和行合并
- jQuery选择器大全
- JQuery中鼠标划过一级菜单,有二级菜单的就显示的处理
- jQuery遍历json的方法分析
- jQuery实现无限往下滚动效果代码
- jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
- jQuery实现的倒计时效果实例小结
- 十条jQuery代码片段助力Web开发效率提升
- jQuery实现下拉菜单
- jQuery
- jQuery操作radio、checkbox、select总结