jQuery基础
2017-02-28 08:40
176 查看
Basic Structure
$(document).ready(function(){ $(selector).event(function(){ $(selector).effect(); }); $(document).on('selector', 'event', function(){ $(selector).effect(); }); });
selector and select child\parent element
$('element_type') $('.class') $('#element_id') $('selector:nth-child(4)') $('selector:last-child(4)') $('selector:even') $('selector:odd') $('selector').parent() $(this)
event
- mouseenter(function(){})
- mouseleave(function(){})
- click()
- dblclick()
double click- hover(inFunc, outFunc)
inFunction is required.- focus()
- keydown() keypress() keyup()
keydown: the key is on its way downkeypress: the key is pressed down
keyup: the key is released
effect
- slideDown(‘fast’)
- slideToggle(‘slow’)
- fadeTo(‘fast’, 0.25)
- hide()
- fadeOut()
- fadeIn()
- animate()
input1: the animation to performinput2: the time in which to perform the animation
$(document).ready(function() { $('div').animate({left:'+=10px'},500); //increasing the distance from the left margin moves something to the right });
Modifying HTML Elements
- target.append(‘<p>element</p>’)
inserts the specified element as the last child of the target element.- prepend()
inserts the specified element as the first child of the target element.- appendTo(target)
- prependTo()
- move element
ele1.after(ele2);ele1.before(ele2);
- empty()
deletes an element’s content and all its descendants- remove()
not only deletes an element’s content, but deletes the element itself- addClass()
- removeClass()
- toggleClass()
if the element has the class, it removes that class; if not, it adds the class.- height(value) / width(value)
- css(CSS_element, value)
- html()
get/set html content- val()
get the value of form element$('input:checkbox:checked').val(); //Get the value from an input var input = $('input[name=checkListItem]').val();
- clone()
- prop(property, value)
set element property.There is also a method attr(), but I am quite confused about html attr vs. prop.
Using Ajax get and display json file example
getJSON()
$.getJSON("/json/cats.json", function(json) { $(".message").html(JSON.stringify(json)); });
Convert Json data to HTML
var html = ""; json.forEach(function(val) { var keys = Object.keys(val); html += "<div class = 'cat'>"; keys.forEach(function(key) { html += "<strong>" + key + "</strong>: " + val[key] + "<br>"; }); html += "</div><br>"; }); $(".message").html(html);
相关文章推荐
- jQuery基础教程笔记适合js新手第1/2页
- jQuery基础学习技巧总结第1/4页
- jQuery基础笔记
- [jQuery教程]jquery基础教程三(css的操作之addClass和removeClass)
- [jQuery教程]jquery基础教程七选择器(selectors的xpath语法应用)
- [jQuery教程]jquery基础教程四(css的操作之css,height和width)
- jQuery基础知识
- jQuery-基础入门 学习笔记一
- [jQuery教程]jquery基础教程二(鼠标点击事件)
- jQuery基础学习技巧总结第1/4页
- Jquery基础教程
- jquery傻瓜基础教程之教你如何制作简单的dialog插件
- jquery基础
- jQuery 基础用法
- jquery 指南/入门基础
- (转)jQuery 基础
- jquery selector 基础
- jquery在开发中要用的基础方法
- [jQuery教程]jquery基础教程六(滑动效果函数之slideDown,slideToggle和slideUp)
- [jQuery教程]jquery基础教程八load方法及小技巧