jQuery与js的却别就是:js是自己定义函数,然后去调用;jquery就是定义函数,在函数中定义谁的功能是什么。
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
实例中的所有 jQuery 函数位于一个 document ready 函数中:这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作,
$(function(){ $(document).ready( function(){ //执行代码});
$("p").click(function{
$("p").hide();
});
});
jquery 选择器 允许您对html元素组或单个元素进行操作。基于元素的id,类,类型,属性,属性值等“查找”(或选择)元素。
jquery中所有的选择器都得一美元符号开头:$()。一般是一个事件触发后,会带来什么样的功能-function
jQuery 的事件 --事件的触发会有功能的实现,一般都是事件后面跟功能(function(){})
鼠标事件: click dblclick mouseenter mouseleave
键盘事件: keypress keydown keyup hover
表单事件: submit change focus blur
文档/窗口事件: load resize scroll unload
语法 show 与 hide 都是有参数的 , (speed,callback)
有一个函数可以代替 show 与 hide ,是 toggle (speed,callback)
jQuery 效果 ---淡入淡出
fadeIn() 用于淡入已隐藏的元素
fadeOut() 用与淡出可见的元素 淡入淡出都是基于屏幕来说的
fadeToggle() 方法可用于淡入淡出的效果
fadeTo() 方法允许渐变为给定的不透明度(值介于0和1之间)
jQuery 效果 ----滑动
slideDown() 向下滑动元素
slideUp() 向上滑动元素
slideToggle() 同时实现向上或者向下滑动元素
jQuery 效果 ----动画
使用的函数是 animate() 方法中可以有多个参数
jQuery 停止动画
使用幻术 stop() 使用与所有jquery效果函数,包括 滑动,淡入淡出,和自定义动画。
jQuery callback
callback函数在当前动画100%完成之后执行
这个函数没有具体的函数名,只是在使用 其他动画函数(function)中添加参数来实现
jQuery ---链(chaining)
jquery可以把动作方法连接在一起,可以允许在一条语句中运行多个jquery方法。
jQuery 获取内容和属性
jquery拥有可操作html元素和属性的强大方法。就是操作DOM的能力。
获得的内容 ———— 包括
text() 设置 或 返回 所选元素的文本内容
html() 设置 或 返回 所选元素的内容(包括html标记)
val()。 设置 或 返回 表单字段的值 $("#btn1").click(function(){alert("值为: " + $("#test").val());});
获取属性 ----attr() 用于获取 或者 设置 属性值。
jQuery 设置内容和属性
还是使用上面三个函数,区别就是 所用的函数中是否有参数 ,有参数就是进行设置,没有参数就是进行获取。
jQuery ---添加元素
添加新内容的四个方法。
append() 在被选元素的结尾插入内容(让在该元素的内部)
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容
区别 ::append/prepend 是在选择元素内部嵌入
after/before 是在元素外面追加
jQuery ---移除元素
remove () --删除被选元素(及其子元素) 当然 remove 方法中 可以接受参数,允许对被删除元素进行过滤
empty( ) -- 从被选元素中删除子元素 empty 方法 不可以进行过滤
jQuery ----获取并设置css类
addClass() --向被选元素添加一个或多个类
removeClass() --从被选元素删除一个或多个类
toggleClass() --对被选元素进行添加或者删除类的切换操作
css() --设置或返回样式属性,通过参数来设置或者获取属性
jQuery 的遍历
遍历就是获取指定元素的父类或者子类。
过滤 ---
first() 选取第一个元素
last() 选取最后一个元素
eq() 返回被选元素中带有指定索引号的元素,索引号从 0 开始
其他的过滤方法,比如 filter()和not()允许选取匹配或不匹配某项指定标准的元
jQuery ---AJAX load() 方法 load方法从服务器加载数据,并把返回的数据放入被选元素
load(url,data,callback)url 是必须的参数,data与callback是可选的参数
也可以把url中的某一个标签加载进去。
ajax 的get()和post()方法
get(url,callback) url是必须的,callback是可选的,是请求成功后所执行的函数名。
post(url,data,callback) url的必须的,其他的参数都是可选的。
在页面上使用jQuery时,如果其他的框架也使用 $ 符号作为简写,发生了冲突,会导致脚本停止运行
jQuery会使用 noConflict() 方法释放对 $ 符号符的控制。
解决冲突的问题:使用jQuery的去全名去代替简写 jQuery(document).ready(function(){
创建自己的简写 var jq = $.noConflict(); jq(document).ready(function(){
将 $ 符号作为变量传递给ready方法,可以在函数内使用 $ 符号,但是在函数外,必须使用全名--jQuery 。 jQuery(document).ready(function($){
在加载页面的同时利用js或者jquery进行后台的数据查询
可以用 jquery ajax 异步 实现
$.ajax({
type: "POST",
url: 请求路径 如 “/asmx/1.asmx/HelloWorld”,
data: 传输参数 要看请求类型 每个返回参数类型不同参数格式不一样,
dataType: 返回参数类型 如 "html、json "等,
beforeSend: function (XMLHttpRequest) {
$("#divlist").html("正在加载数据");
}
***jQuery中实现点击效果的四种不同的写法(jquery中没有onclick事件)
1.$(".tab").click(function () { })
2.$(".tab").on("click",function () { })
3.$(document).on("click", ".tab",function () { })
4.使用<onclick="">触发函数
四种方法的可行度:3>2>1>4
jquery中的jQuery.on()同时绑定多个事件的写法
$(".class").on({
click:function(){
//回调
},
mouseover:function(){
//回调
},
mouseout:function(){
//回调
}
})